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