SlideShare a Scribd company logo
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 Ecosystems
Rosetta 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 Commerce
Rosetta 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 Brands
Rosetta 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 Narrative
Rosetta Marketing
 
B2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentB2B Tech Website Competitive Assessment
B2B Tech Website Competitive Assessment
Rosetta Marketing
 
How B2B Tech Brands Use SEO
How B2B Tech Brands Use SEOHow B2B Tech Brands Use SEO
How B2B Tech Brands Use SEO
Rosetta 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 Business
Rosetta 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 Experience
Rosetta 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 Media
Rosetta 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

Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 

Recently uploaded (20)

Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 

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.