UI DESIGN GUIDELINES FOR RESPONSIVE DESIGN

Posted by:
Colin

Like
Like Love Haha Wow Sad Angry

regentcollege

 

Desktop Points to Consider

With the possibilities of desktop design, we can get away with, and take advantage of: Extensive grid-like layouts, which allow the user to easily scan for content they may be interested in or tying to find.

Horizontal navigation, sub-menus, mega-dropdowns, and more, all for easy-to-filter content.
More pages for a more interactive and extensive experience on a desktop site.
Places for advertisements, side content, additional blurbs, or call to action elements.
Clickable areas that can help guide the user, like breadcrumbs, which would not otherwise be usable on smaller touchscreens.
Access to more technology, including those that could influence design and the user experience.
Fat footers, asides, and much more.
Websites should take advantage of the extra capabilities of a desktop site to give the users more options. Users should be tempted to come to a desktop version of a site after checking it out on mobile or a tablet, giving the user more possibilities to interact and gain from the website.
From a user experience perspective, be sure to still create desktop designs that are flexible, and down to a particular size, are still easily usable with keyboards and traditional desktop usage. Netbooks, while not as common as they used to be, are still around, and users will try to interact with a website just as they would with a typical computer – keyboard, mouse, touchscreen-less, and all – only smaller.

Tablet Points to Consider
So how to we accomplish this goal? A new trend for responsive design that’s coming about is making responsive designs more app-like in interface, design, as well as functionality. When designing for tablets, take interface design inspiration from native tablet applications. Many of the features include:
Larger touch areas, especially for navigation. Without the precision of a mouse or touchpad, larger areas that one can touch with a finger are essential.
Tabs, accordions, and more can be particularly helpful in touchscreen design, and to save space on the smaller screen area. Don’t just think of how one would use these features on a desktop, such as in a sidebar area, but rather for interaction with the entire website. For example, allow users to move between entire sections of the website with the ease of tabs, much like they would on an app.
Tablet design used to mean simply taking the same, or very similar layout of the desktop site, and squishing it together so it fits on the screen. This isn’t the way to go though. While you can easily do this and still make a website look presentable, you could be sacrificing far too much in usability.
Use buttons or button-like design for simple actions, main links, etc.
Additional button-like navigation, such as back and forward buttons can be useful for those navigating with a touchscreen, and especially with a device that may have a less than user-friendly browser. (Don’t assume your user has the exact same brand of tablet you have.)
Designs should be optimized for retina display. While it’s only iPads that have retina display for tablets at this point, we can expect to see the technology grow. Nonetheless, with the majority of tablet users being iPad users, this should be taken into consideration anyway.

Mobile Points to Consider
Along with the same touchscreen considerations as tablets (think larger touchable buttons/icons, app-like design), mobile can benefit from some other useful design patterns:
Keep interaction in its simplest form. Cut out any extra capabilities, and allow the user to focus on the most important actions.
For website with excessive content, make it easy to sort through and filter. Users don’t always like typing in search items on mobile, and while a search form can be helpful, also offer useful categories or a search filter sort of navigation.
Use minimal design, enough to brand the website but not take over the usability of the website.
Bigger fonts and better type display. Don’t force the average user to zoom in!
Add text summaries to bigger pieces of content to save space, allowing the user to easily ignore content they don’t want.
Get creative with tabs, accordions, navigation, and other forms of space saving methods.
Make sure popups, notifications, ads, and more are either non-existent on mobile, or user-friendly to deal with if they are absolutely needed.
If possible, make sure there are a minimal number of pages on a mobile site. This is not always possible depending on the type of website, but if it is, use javascript to swap out content (e.x. tabs) to avoid lengthy page loads.

Like
Like Love Haha Wow Sad Angry

Fluid Responsive Web, Mobile Tablet Patterns, UI UX

Leave a Reply

Your email address will not be published.


GLOBAL PRODUCTION
×