SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
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

Contenu connexe

Plus de 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
 

Plus de 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
 

Dernier

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Dernier (20)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

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

Notes de l'éditeur

  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.