Small Screen, Big Ideas

MARCH 2014 ROSETTA UXPA CLE
Agenda 2 03 Mobile Influences Desktop 10 Hamburger Takeover 12 Click Test Results 18 Unmoderated Usability Test Results 21 Mobile A/B Test Example 24 Our Point of View 30 Who‟s Hitting the Mark? 34 Appendix
Mobile Influences Desktop 3
Mobile Influences Desktop Overview We found many examples of desktop sites that have adopted several mobile and tablet design themes. 4
Mobile Influences Desktop Cleaner Homepage A cleaner homepage is introduced to desktop designs, providing a consistent layout to their mobile counterpart. Search is replaced with key navigational options, while promotions and ads are eliminated. 5 Kayak
Mobile Influences Desktop Flat Design Now that flat design is prevalent across all channels, it‟s a standard that‟s being pushed. 6 Microsoft Windows 8 Operating System Built By Buffalo site
Mobile Influences Desktop Larger Font Large text allows users to more easily scan. This is especially beneficial when translating information over to the mobile platform. 7 Gummisig.com
Mobile Influences Desktop Infinite Scrolling Infinite scrolling has been adapted to desktop designs, allowing more content to load on a single page as opposed to users clicking through multiple pages. 8 Pinterest Skittles
Mobile Influences Desktop Responsive Design Google recommendation that everyone should move to a responsive design, has led to a recent „boom‟ in utilization of the technique. 9 DittoDC.com
Hamburger Takeover 10
Hamburger Overview The “hamburger” menu icon is often used in mobile design, but now desktop sites are starting to use it. 11
Click Test Results 12
Click Test Results Testing Adoption Selected a sample of desktop sites using the hamburger navigation today:  Time  Today  Slate  New York Times 13 Online click tests and unmoderated usability studies gauged if the users on an online panel would use the hamburger navigation for simple tasks
Click Test Results New York Times Home Users were asked the following question before given a chance to click: Where would you click to find news related to business? 14 Heat Map
Click Test Results Slate Sign In Users were asked the following question before given a chance to click: Where would you click to sign in to your account? You may click up to two places. 15 Heat Map
Click Test Results Today Nav Flow Users were asked the following question before given a chance to click: Where would you go on this website to find news stories related to food? 16 Heat Map Heat Map
Click Test Results Time Users were asked the following question before given a chance to click: Where would you click to find news section related to business? 17 Heat Map
Unmoderated Usability Test Results 18
Unmoderated Usability Test Overview Four users were asked to explore Marriott.com and complete specific tasks. These tasks were designed to identify the navigational paths users took in reviewing the site, with specific focus on whether or not any users interacted with the “hamburger” icons to complete their tasks. 19
Unmoderated Usability Test Review Overall, none of the users interacted with the “hamburger” menu option. Several users had difficulty navigating to categories, such as weddings and rewards program. Two users thought the rewards program was difficult to find, as they expected to find this in the top utility navigation near the sign in information. In summary, the site has some overall usability issues, but the “hamburger” navigation did not help any of these issues. Having both the “hamburger” option and changing navigation throughout the experience did them a disservice. 20
Mobile A/B Test Example 21
Mobile A/B Test Example In February 2014, an independent web publishing company, Exis, conducted an A/B test on the “hamburger” icon to see how users interact with this element on their site and which version of the icon resonates with the user more.  50,000 mobile users  Users were tested across multiple mobile devices including iOS (64%), Android (34%), and Windows Phone and Blackberry (2%). 22 Original test:  The menu icon on the right was clicked more than the previous two.
Mobile A/B Test Example 23 Findings:  Bordered menu clicked on significantly more than “hamburger” icon  iOS users are 2-3 times more likely to tap menu icon than Android users Original test:  The menu icon on the right was clicked more than the previous two. New test:
Our Point of View 24
Our Point of View Be Consistent BE CONSISTENT The “hamburger” icon should always remain in the same place, carrying the same options. 25
Our Point of View Crutches INCLUDE SOME CRUTCHES JUST IN CASE Marriott pulls out key user tasks (sign in, reservations etc.) out of the hamburger nav and allows for quick access in the utility navigation. 26
Our Point of View Right Place, Right Time RIGHT PLACE, RIGHT TIME Use it in the right site for the right audience. Use it only if it matches the simplicity of the design you are going for. 27
Our Point of View Don‟t Get Lazy DON‟T GET LAZY Do not make it the junk drawer of the site. For sites such as Slate, avoid hiding the sign in, as it seems unnecessary. Remember you want to encourage users to sign in. 28
Our Point of View Test With Users TEST WITH USERS The best way to make sure you haven‟t created roadblocks with your new design is to test it with users. 29
Who‟s Hitting The Mark? 30
Desktop Examples NBC News 31 New visitors see this welcome screen with directions. NBCNews.com
Desktop Examples Pinterest 32 New visitors see this welcome screen with directions. Pinterest.com I've had that for as long as I can remember. It's where I go to find ideas on whatever sub category I want… usually food.” — Sabrina “
Desktop Examples Squarespace 33 Simple design makes the “Menu” and hamburger nav more obvious to users. Squarespace.com
Appendix 34
Resources 35  http://www.demacmedia.com/design-user-experience/5-ways-tablets-mobile-devices- influence-design-trends/  https://econsultancy.com/blog/8123-should-mobile-tablet-design-influence-your-web-design  https://www.internetretailer.com/mobile/2014/02/03/sponsored-special-report-web-and- mobile-design-converge?list_type=mag&index=4  https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014  https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014  http://www.onextrapixel.com/2013/12/10/30-beautifully-designed-sites-using-horizontal-or- vertical-infinite-scrolling/  http://exisweb.net/mobile-menu-abtest  http://searchenginewatch.com/article/2253965/3-Reasons-Why-Responsive-Web-Design- is-the-Best-Option-For-Your-Mobile-SEO-Strategy

Notes de l'éditeur

Desktop websites have always paved the way in leading mobile and tablet designs. However, in recent years, companies have seen significant increases in their sales as more users flock to their mobile and tablet sites for the sake of convenience.From this discovery, more companies are seeing that designs used on mobile and tablet sites have assisted in generating more revenue for their businesses. Desktop websites are now taking on a more modern look and feel, displaying a cleaner and simpler layout. Some areas that have already been adopted include:Cleaner homepageRemoving navigational optionsEliminating promotions and ads, consolidating HTMLIncluding iconsFlat designLarger fontsInfinite scrollingAnother possible influence bringing desktop and mobile together is emphasis on Responsive Design, an approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices (mobile phones, tablet and desktop computers).
Recently sites and operating systems are more focused on a flat design layout similar to the mobile sites as it provides simplicity on the page. Images/ icons are easier for users to scan and digest. Keep in mind that icons that are used on the site should be universally accepted by users.Card/tiles design represents this idea as well- however there is debate of whether or not this limits the designers visuals or copy included within this space
Infinite scrolling has been established on the desktop design as users now continue to scroll down the page, with more content loading as the page progresses. This eliminates having to continuously go to new pages to view information.
Responsive websites provide a seamless user experience across many devices and screen sizes.
Show of hands – Who is familiar with this form of navigation?– Who’s heard it called ‘hamburger?’Do you feel this is a right or wrong way to present category choices on a desktop or mobile site? Are there any sites that you feel are doing a good job at presenting this?Do you feel that desktop sites should adopt the “hamburger” menu? If so, what content should go in here? Should it be all, some, or just the junk?
As you go deeper in the site, main navigation is removed and people can only get to main nav through the hamburger
We chose that test because it was interesting that they hid the sign in underneath. (no other way to get to it)The takeaway here is that some people are using it - it's the only way to get to the sign in - so, they made a mistake - didn't use it the right way
Did hiding the categories underneath the hamburger nav cause people to scrollSome people scrolled all the way to the bottom of the page to look for a story
Altered the task in this one by wording slightly differently – so we said news section to try and mitigate the random clicks.We allowed them to click once.As you can see while severalusers didn’t identify the hamburger navigation as they clicked elsewhere on the page to find the business section. (21 out of 40 users didn’t click on the hamburger navigation)
We chose a different method for this test because of the complications with Marriot – Participants performed the following tasks as a part of each session:Find an all inclusive vacationHow would you find more info and make a choice on a hotel to host a wedding receptionLearning more about the rewards program- where would you go to sign upIssue was there were several e-Spots on the homepage so users were more inclined to select in this area as opposed to using the hamburger navigation menu
Overall users didn’t interact with the hamburger menu option again because there were so many e-spots on the homepage and other optionsDespite having e-spots users had difficulty finding categories such as weddings and rewards program- rewards wasn’t where some users expected it to be (on the utility nav) since that’s where you would sign in but couldn’t actually obtain information on the programAgain weddings had an e-spot as well as other areas of the homepage that they could select on Having hamburger menu and the several different e-spots as well as multiple options on the homepage and subcategory pages hindered more users from interacting with the hamburger menu
Many ways to display the icon, even mobile is going through testing and optimizationMaybe an issue with using the word “Menu” in other languages (may not be the same length or resonate the same for users)- therefore may need a universal character
If there is a lot of content, we suggest expanding categories in the menu or using page sub navigation deeper in the site – rather than changing the options as the user goes deeper in the site.
Marriott’s quick links may defeat the purpose of having the complete set of options in the “hamburger” navigation. However, their tasks and content for their users are specific enough for it to work. In this case, the “hamburger” menu becomes more of a security blanket.
….or close to it
This is a bit overdone as it takes over the entire homepage – “it’s so easy we have to tell you how to use it!”Becomes very distracting to user as it takes them out of their experience.
We had out own internal debate on if this technique makes sense for simple categories or very complex like Pinterest – I think even in the complex case you should still take care in organizing the content and categories
Squarespace displays the word “menu” in conjunction with the hamburger navigation and inputs all of their main category options into this area.In addition, the homepage shifts to the left, as the menu drawer opens up on the right.Squarespace still struggles with consolidating the category options as there are still numerous options within this space
….or close to it
DThis is a bit overdone – “it’s so easy we have to tell you how to use it!”I think Pinterest had a bit subtler way of highlighting it quickly.

Small Screen, Big Ideas

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

Small Screen, Big Ideas

Plus De Contenu Connexe

Plus par Rosetta Marketing (9)

Plus récents (20)

Small Screen, Big Ideas

Notes de l'éditeur

Small Screen, Big Ideas

Vous êtes en train de lire un aperçu.

Small Screen, Big Ideas

Suggestions

Plus De Contenu Connexe

Plus par Rosetta Marketing (9)

Plus récents (20)

Small Screen, Big Ideas

Notes de l'éditeur