The following are my takeaways for the Neilsen Norman Group’s Usability Week session titled ‘Scaling USer Interfaces’ (Austin, Texas) by Amy Schade:
From smallest to large – smart watches, phones, tables, laptops, desktops, to large touch displays – front-end developers and designers need to take an Information-Processing approach. Inherently people have different thoughts about what devices are best used for certain things they want to accomplish… pay taxes, surf the web, write a paper, read a book, etc. These thoughts are based on the variety of input devices, screen size, working memory required by the user, portability, session length, privacy, or connectivity.
The bottom line is that development and design has to encompass desktop, tablet, and mobile viewing, so here are some core rules to follow concerning that process:
- Analytics dictate breakpoints in CSS
For as many people who state that there should be two, three, or even six break points there are just as many devices – Android tablets, Kindle Fires, phablets, etc. – that will always defy standardized break points. So, your CSS media break points should always be dictated at bare minimum by device analytics - Any development process can work
Whether you develop mobile-first, desktop-first, or mobile/tablet/desktop simultaneously are all 100% fine and justified. Websites that are designed desktop first typically have a long scroll for all of the page content on a mobile device. Likewise, websites designed mobile first sometimes have a subpar experience on desktop because there is a lot of compartmentalized content stacked with a lot of negative space. Sometimes, the tablet experience is left outin the cold with the concern just being for desktop and mobile. - Carefully select scaffolding or frameworks
There are content management systems for ruby on rails that allow template swapping based on server-side detection, there are flexbox grid layout systems, there is normalize CSS, bootstrap, and there are a lot of jQuery solutions for supporting older browsers. All in all just be very careful of all types of scaffolding and frameworks, which could cause potential error, and could lead foiling sustainability and future expansions. - Wireframe experiences for mobile/tablet/desktop to work together
Yes, every CSS rockstar and web-celebrity will tell you that developing mobile-first will save time and lines of code for the person writing the CSS. This is true, but ultimately wire-framing tablet, mobile, and desktop layout through content strategy to work together, will yield the best results in the long run. - Content and goals dictate navigation and secondary navigation
When dealing with navigation within a smaller screen space, just remember not to hide or skip secondary navigation. You can feel free to use icons, indentation, color, and space to indicate sub navigation and expansions if you are developing a mega-mobile navigation, and don’t forget that both footer navigation and desktop hamburgers work too. Also remember to use as much touch-based CSS as you can for hover and cursor functionality on desktop, and compressing links, menus, and navigation in accordions is preferable with indicating iconography. But, show smaller navigation and lists whenever possible.
Apart from those four rules, here is a general list of things to be conscious of, and details that are often over looked:
- If you use a ‘m’ dot mobile website provide a way to go back-and-forth to desktop
- Key tasks should be even more prominent on mobile than desktop
- Mobile websites have to allow breaks in density for scrolling and swiping
- Call the correct native keyboards at all times
- Use tablet and phone GPS whenever appropriate and possible
In general, just using common sense when it comes to navigation, lightboxes, searchboxes, etc… if something seems counter-intuitive or obtuse, chances are it should just be standardized. It takes a lot of nuance and care to make bells and whistles work seamlessly, and to not seem obstructive, so using best judgment and usability testing is helpful if design and interaction is in that grey area.
“Don’t innovate for the purpose of innovating… innovate a little more cautiously, and make sure you do your testing.” –Amy Schade