SlideShare a Scribd company logo
1 of 35
Download to read offline
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

More Related Content

More from Rosetta Marketing

The Evolution of B2B Commerce Powered by Engagement Ecosystems
The Evolution of B2B Commerce Powered by Engagement EcosystemsThe Evolution of B2B Commerce Powered by Engagement Ecosystems
The Evolution of B2B Commerce Powered by Engagement EcosystemsRosetta Marketing
 
CES 2015: Top Trends in Digital Commerce
CES 2015: Top Trends in Digital CommerceCES 2015: Top Trends in Digital Commerce
CES 2015: Top Trends in Digital CommerceRosetta Marketing
 
CES 2015: Changing How We Interact With Brands
CES 2015: Changing How We Interact With BrandsCES 2015: Changing How We Interact With Brands
CES 2015: Changing How We Interact With BrandsRosetta Marketing
 
Social Media Storytelling: Using Wall Posts As a Social Narrative
Social Media Storytelling: Using Wall Posts As a Social NarrativeSocial Media Storytelling: Using Wall Posts As a Social Narrative
Social Media Storytelling: Using Wall Posts As a Social NarrativeRosetta Marketing
 
B2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentB2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentRosetta Marketing
 
10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business
10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business
10 Tips for Editing Wikipedia Entries on Behalf of a Brand or BusinessRosetta Marketing
 
Ubiquitous Computing and the In-Store Shopping Experience
Ubiquitous Computing and the In-Store Shopping ExperienceUbiquitous Computing and the In-Store Shopping Experience
Ubiquitous Computing and the In-Store Shopping ExperienceRosetta Marketing
 
How B2B Tech Brands Use Paid Media
How B2B Tech Brands Use Paid MediaHow B2B Tech Brands Use Paid Media
How B2B Tech Brands Use Paid MediaRosetta Marketing
 

More from Rosetta Marketing (9)

The Evolution of B2B Commerce Powered by Engagement Ecosystems
The Evolution of B2B Commerce Powered by Engagement EcosystemsThe Evolution of B2B Commerce Powered by Engagement Ecosystems
The Evolution of B2B Commerce Powered by Engagement Ecosystems
 
CES 2015: Top Trends in Digital Commerce
CES 2015: Top Trends in Digital CommerceCES 2015: Top Trends in Digital Commerce
CES 2015: Top Trends in Digital Commerce
 
CES 2015: Changing How We Interact With Brands
CES 2015: Changing How We Interact With BrandsCES 2015: Changing How We Interact With Brands
CES 2015: Changing How We Interact With Brands
 
Social Media Storytelling: Using Wall Posts As a Social Narrative
Social Media Storytelling: Using Wall Posts As a Social NarrativeSocial Media Storytelling: Using Wall Posts As a Social Narrative
Social Media Storytelling: Using Wall Posts As a Social Narrative
 
B2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentB2B Tech Website Competitive Assessment
B2B Tech Website Competitive Assessment
 
How B2B Tech Brands Use SEO
How B2B Tech Brands Use SEOHow B2B Tech Brands Use SEO
How B2B Tech Brands Use SEO
 
10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business
10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business
10 Tips for Editing Wikipedia Entries on Behalf of a Brand or Business
 
Ubiquitous Computing and the In-Store Shopping Experience
Ubiquitous Computing and the In-Store Shopping ExperienceUbiquitous Computing and the In-Store Shopping Experience
Ubiquitous Computing and the In-Store Shopping Experience
 
How B2B Tech Brands Use Paid Media
How B2B Tech Brands Use Paid MediaHow B2B Tech Brands Use Paid Media
How B2B Tech Brands Use Paid Media
 

Recently uploaded

Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 

Recently uploaded (20)

Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 

Small Screen, Big Ideas

  • 2. 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
  • 4. Mobile Influences Desktop Overview We found many examples of desktop sites that have adopted several mobile and tablet design themes. 4
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 11. Hamburger Overview The “hamburger” menu icon is often used in mobile design, but now desktop sites are starting to use it. 11
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 19. 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
  • 20. 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
  • 22. 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.
  • 23. 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:
  • 25. Our Point of View Be Consistent BE CONSISTENT The “hamburger” icon should always remain in the same place, carrying the same options. 25
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 31. Desktop Examples NBC News 31 New visitors see this welcome screen with directions. NBCNews.com
  • 32. 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 “
  • 33. Desktop Examples Squarespace 33 Simple design makes the “Menu” and hamburger nav more obvious to users. Squarespace.com
  • 35. 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

Editor's Notes

  1. 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).
  2. 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
  3. 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.
  4. Responsive websites provide a seamless user experience across many devices and screen sizes.
  5. 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?
  6. As you go deeper in the site, main navigation is removed and people can only get to main nav through the hamburger
  7. 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 
  8. 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
  9. 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)
  10. 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
  11. 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
  12. 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
  13. 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.
  14. 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.
  15. ….or close to it
  16. 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. 
  17. 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
  18. 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
  19. ….or close to it
  20. 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.