This is a lighthearted look at the current user experience of hamburger menu navigation on mobile and desktop platforms. The content will be based upon my observations in user research and additional studies and observations by usability experts.
This is a lighthearted look at the current user experience of hamburger menu navigation on mobile and desktop platforms. The content will be based upon my observations in user research and additional studies and observations by usability experts.
#HamburgerWars Ignite UXPA International 2015 Michael Ryan
The responsive age has brought many challenges to the UX world. One of the biggest challenges is mobile navigation. Enter the hamburger icon (☰)! Many mobile apps and sites today use this design pattern. But, is hamburger navigation our responsive savior or does it introduce additional problems? This session will look at the current use of hamburger navigation and summarize qualitative and quantitative studies of it's efficacy.
Whoa! Did You See That? Collaborative Data Collection and AnalysisKyle Soucy
Observing a usability test is like witnessing an accident; everyone sees it go down differently. One of the most important steps in usability testing, and yet often skipped by a lot of firms, is conducting a thorough debrief with the observers after testing is complete. Research should not be performed while working in a vacuum. The data and feedback collected from end users is not complete without understanding the observers’ perspectives, which oftentimes is different from the moderator's. The process for running an observer debrief involves getting all the observers (and even people who did not observe, but should have) to attend a meeting where we review the notes for each test and document the observations and perceived implications. In this session, you will learn various methods for running a debrief, when to use them, and walk away better prepared to get the most out of your research!
After attending this practical session, attendees will be able to take what they have learned and execute a thorough debrief the next day. I will discuss various methods for running a debrief, spending more time on one method in particular, the Wish for/how-to/what-if method. For those that are not familiar, this method is executed by asking observers to create implications for each observation in the form of: Wish for... (W4) How to... (H2) What if... (Wif). The benefit being that stakeholders do not focus on actual solutions at this time, but instead open the discussion up for more out of the box thinking.
What attendees will learn:
- The importance of running a debrief
- How to run a debrief (various options)
- How to keep observers engaged during testing
- Understanding the difference between observation, inference, opinion, and a recommendation
- Pitfalls to avoid
Who will benefit from the presentation and why:
Anyone who moderates usability tests or research studies will benefit greatly from this session. They will learn how to distill the key findings from the observers and keep them engaged throughout the testing process.
You might have heard of microinteractions… single-purpose features that make a big difference. You might be skeptical…. can something that small have a big payoff, or is this the case of yet another buzzword? To answer this question, let’s go inside a place where stakes are high, and a critical failure can turn a routine experience into a horror story. Our whirlwind tour of restrooms gone wrong will show you why you must pay attention to microinteractions, or risk watching your UX go down the toilet.
ممکن است شما هم با من هم عقیده باشید که طراحی واکنشگرا برخلاف ظاهر دوست داشتنی و منعطفاش، حاوی چالش های پنهانی نهفتهای است که گاهی دردآور است و روند اجرای کار را کند می کند. در مقابل این چالشها بجای اینکه به اختراع دوباره چرخ فکر کنیم؛ کافی است نگاهی به الگوهای حاضر بیاندازیم. نویگیشنها یکی از این چالشهای موجود است. در این ارائه به تعیین اولویتها و ترتیب محتوا که مهم ترین بخش تصمیم گیری در واکنشگرا کردن نویگیشنها ست، خواهیم پرداخت. همینطور نقش همبرگرمنو، مزایا و معایب استفاده از آن را شرح می دهیم. در بخش دیگر به بررسی تجربه کاربری نویگیشنها در طراحی واکنشگرا پرداخته و در انتها جدیدترین الگوهای نویگیشن در طراحی واکنشگرا را معرفی میکنیم.
Designing app-like responsive web experiencesLisa Fast
Responsive web sites receive increasing numbers of visitors from phones. The Canada.ca design team has been partnering with departments to improve citizen success on top online tasks, some of which get mostly-mobile visits. This talk highlights a set of ideas and design principles from mobile app design that we applied in two Canada.ca test-redesign-test projects with phone users.
This is a lighthearted look at the current user experience of hamburger menu navigation on mobile and desktop platforms. The content will be based upon my observations in user research and additional studies and observations by usability experts.
#HamburgerWars Ignite UXPA International 2015 Michael Ryan
The responsive age has brought many challenges to the UX world. One of the biggest challenges is mobile navigation. Enter the hamburger icon (☰)! Many mobile apps and sites today use this design pattern. But, is hamburger navigation our responsive savior or does it introduce additional problems? This session will look at the current use of hamburger navigation and summarize qualitative and quantitative studies of it's efficacy.
Whoa! Did You See That? Collaborative Data Collection and AnalysisKyle Soucy
Observing a usability test is like witnessing an accident; everyone sees it go down differently. One of the most important steps in usability testing, and yet often skipped by a lot of firms, is conducting a thorough debrief with the observers after testing is complete. Research should not be performed while working in a vacuum. The data and feedback collected from end users is not complete without understanding the observers’ perspectives, which oftentimes is different from the moderator's. The process for running an observer debrief involves getting all the observers (and even people who did not observe, but should have) to attend a meeting where we review the notes for each test and document the observations and perceived implications. In this session, you will learn various methods for running a debrief, when to use them, and walk away better prepared to get the most out of your research!
After attending this practical session, attendees will be able to take what they have learned and execute a thorough debrief the next day. I will discuss various methods for running a debrief, spending more time on one method in particular, the Wish for/how-to/what-if method. For those that are not familiar, this method is executed by asking observers to create implications for each observation in the form of: Wish for... (W4) How to... (H2) What if... (Wif). The benefit being that stakeholders do not focus on actual solutions at this time, but instead open the discussion up for more out of the box thinking.
What attendees will learn:
- The importance of running a debrief
- How to run a debrief (various options)
- How to keep observers engaged during testing
- Understanding the difference between observation, inference, opinion, and a recommendation
- Pitfalls to avoid
Who will benefit from the presentation and why:
Anyone who moderates usability tests or research studies will benefit greatly from this session. They will learn how to distill the key findings from the observers and keep them engaged throughout the testing process.
You might have heard of microinteractions… single-purpose features that make a big difference. You might be skeptical…. can something that small have a big payoff, or is this the case of yet another buzzword? To answer this question, let’s go inside a place where stakes are high, and a critical failure can turn a routine experience into a horror story. Our whirlwind tour of restrooms gone wrong will show you why you must pay attention to microinteractions, or risk watching your UX go down the toilet.
ممکن است شما هم با من هم عقیده باشید که طراحی واکنشگرا برخلاف ظاهر دوست داشتنی و منعطفاش، حاوی چالش های پنهانی نهفتهای است که گاهی دردآور است و روند اجرای کار را کند می کند. در مقابل این چالشها بجای اینکه به اختراع دوباره چرخ فکر کنیم؛ کافی است نگاهی به الگوهای حاضر بیاندازیم. نویگیشنها یکی از این چالشهای موجود است. در این ارائه به تعیین اولویتها و ترتیب محتوا که مهم ترین بخش تصمیم گیری در واکنشگرا کردن نویگیشنها ست، خواهیم پرداخت. همینطور نقش همبرگرمنو، مزایا و معایب استفاده از آن را شرح می دهیم. در بخش دیگر به بررسی تجربه کاربری نویگیشنها در طراحی واکنشگرا پرداخته و در انتها جدیدترین الگوهای نویگیشن در طراحی واکنشگرا را معرفی میکنیم.
Designing app-like responsive web experiencesLisa Fast
Responsive web sites receive increasing numbers of visitors from phones. The Canada.ca design team has been partnering with departments to improve citizen success on top online tasks, some of which get mostly-mobile visits. This talk highlights a set of ideas and design principles from mobile app design that we applied in two Canada.ca test-redesign-test projects with phone users.
FoodToast is a regional food delivery service opearted in more than 500 Indian cities. FoodToast aims to define upraise the quality of life and experience of urban consumers by offering the convenience of food ordering and delivery and overall experience.
Mobile App Navigation Patterns and Examples.pdfLaura Miller
Mobile app navigation allows users to jump from one page to another smoothly. Keep reading and know what are the best patterns and examples of nav menus.
Mobile App Navigation Patterns and Examples.pdfchristiemarie4
Mobile app navigation allows users to jump from one page to another smoothly. Keep reading and know what are the best patterns and examples of nav menus.
Restaurant Finder Android Application project PresentationAbhinav Jain
The Prime objective of “Restaurant Finder Application” is to create a full fledged Android application which could locate a list of restaurants based on the location & type of the cuisine entered by the user. The user not only finds all the restaurant in the city, but also he can make a choice of the best restaurant based on the rating. The user can also map the location of the restaurant on Google Maps rendered to the user on the phone & find the path from his current location or from any other location to the restaurant. The user has the facility to make a call directly to the restaurant and can also obtain the detailed review provided by the others users. They can also send their own review to their friends via E-mail.
Hello, my name is Malik, I am a UX designer starting my career in UX. I recently completed the at General Assembly UXDI (UX design immersive) course in New York City.
The portfolio covers two projects. first a design exercise, to add a feature to an existing digital product. Second, was client work with datingring.com, an online dating site that wanted some help with conversion.
Webinar Series - How To Launch Your App IdeaTheAppLabb
In this session you will learn how to launch your app ideas. From concept to strategy, design, development and launch. Learn how to take action to mobilize your ideas.
• How to choose the right idea: from idea conception to idea development
• Steps to follow before approaching your development partner
• Tips to turn your idea into app success
Webinar hosted on Thursday, August 14th, 2014.
www.TheAppLabb.com
#ideasmademobile
Andrea Di Sorbo, Sebastiano Panichella, Carol Alexandru, Corrado A. Visaggio, Gerardo Canfora, Harald Gall: SURF: Summarizer of User Reviews Feedback. Proceedings of the 39th IEEE International Conference on Software Engineering (ICSE 2017). Buenos Aires, Argentina. RANK: A*
I Am the LAAW! (Lean Accessibility Audit Workshops)Michael Ryan
Fitting accessibility into an agile development cycle can be challenging. Often accessibility specialists are spread thin across agile squads and they have to deliver quickly into multiple sprint cycles.
To meet the demand I looked to Lean UX principles and developed The Lean Accessibility Audit Workshop (LAAW). LAAW has two goals 1) detect accessibility problems quickly and 2) spread the accessibility knowledge. This is accomplished by training members of agile squads on accessibility basics, evaluation methods and tools. The training evolves into an accessibility audit as squad members collaboratively capture, share and prioritize findings. The LAWW method compresses a 6-8 week evaluation process into a 2 weeks process while training squad members to detect and avoid accessibility issues in the future. And it can be pretty fun.
I Am the LAAW! Lean Accessibility Audit WorkshopsMichael Ryan
Fitting accessibility into an agile development cycle can be challenging. Often accessibility specialists are spread thin across agile squads and they have to deliver quickly into multiple sprint cycles.
To meet the demand I looked to Lean UX principles and developed The Lean Accessibility Audit Workshop (LAAW). LAAW has two goals 1) detect accessibility problems quickly and 2) spread the accessibility knowledge. This is accomplished by training members of agile squads on accessibility basics, evaluation methods and tools. The training evolves into an accessibility audit as squad members collaboratively capture, share and prioritize findings. The LAWW method compresses a 6-8 week evaluation process into a 2 weeks process while training squad members to detect and avoid accessibility issues in the future. And it can be pretty fun.
This session will explain how to bring LAAW to your organization
More Related Content
Similar to #HamburgerWars UXPA Boston 15 (10 Minute Talk)
FoodToast is a regional food delivery service opearted in more than 500 Indian cities. FoodToast aims to define upraise the quality of life and experience of urban consumers by offering the convenience of food ordering and delivery and overall experience.
Mobile App Navigation Patterns and Examples.pdfLaura Miller
Mobile app navigation allows users to jump from one page to another smoothly. Keep reading and know what are the best patterns and examples of nav menus.
Mobile App Navigation Patterns and Examples.pdfchristiemarie4
Mobile app navigation allows users to jump from one page to another smoothly. Keep reading and know what are the best patterns and examples of nav menus.
Restaurant Finder Android Application project PresentationAbhinav Jain
The Prime objective of “Restaurant Finder Application” is to create a full fledged Android application which could locate a list of restaurants based on the location & type of the cuisine entered by the user. The user not only finds all the restaurant in the city, but also he can make a choice of the best restaurant based on the rating. The user can also map the location of the restaurant on Google Maps rendered to the user on the phone & find the path from his current location or from any other location to the restaurant. The user has the facility to make a call directly to the restaurant and can also obtain the detailed review provided by the others users. They can also send their own review to their friends via E-mail.
Hello, my name is Malik, I am a UX designer starting my career in UX. I recently completed the at General Assembly UXDI (UX design immersive) course in New York City.
The portfolio covers two projects. first a design exercise, to add a feature to an existing digital product. Second, was client work with datingring.com, an online dating site that wanted some help with conversion.
Webinar Series - How To Launch Your App IdeaTheAppLabb
In this session you will learn how to launch your app ideas. From concept to strategy, design, development and launch. Learn how to take action to mobilize your ideas.
• How to choose the right idea: from idea conception to idea development
• Steps to follow before approaching your development partner
• Tips to turn your idea into app success
Webinar hosted on Thursday, August 14th, 2014.
www.TheAppLabb.com
#ideasmademobile
Andrea Di Sorbo, Sebastiano Panichella, Carol Alexandru, Corrado A. Visaggio, Gerardo Canfora, Harald Gall: SURF: Summarizer of User Reviews Feedback. Proceedings of the 39th IEEE International Conference on Software Engineering (ICSE 2017). Buenos Aires, Argentina. RANK: A*
Similar to #HamburgerWars UXPA Boston 15 (10 Minute Talk) (20)
I Am the LAAW! (Lean Accessibility Audit Workshops)Michael Ryan
Fitting accessibility into an agile development cycle can be challenging. Often accessibility specialists are spread thin across agile squads and they have to deliver quickly into multiple sprint cycles.
To meet the demand I looked to Lean UX principles and developed The Lean Accessibility Audit Workshop (LAAW). LAAW has two goals 1) detect accessibility problems quickly and 2) spread the accessibility knowledge. This is accomplished by training members of agile squads on accessibility basics, evaluation methods and tools. The training evolves into an accessibility audit as squad members collaboratively capture, share and prioritize findings. The LAWW method compresses a 6-8 week evaluation process into a 2 weeks process while training squad members to detect and avoid accessibility issues in the future. And it can be pretty fun.
I Am the LAAW! Lean Accessibility Audit WorkshopsMichael Ryan
Fitting accessibility into an agile development cycle can be challenging. Often accessibility specialists are spread thin across agile squads and they have to deliver quickly into multiple sprint cycles.
To meet the demand I looked to Lean UX principles and developed The Lean Accessibility Audit Workshop (LAAW). LAAW has two goals 1) detect accessibility problems quickly and 2) spread the accessibility knowledge. This is accomplished by training members of agile squads on accessibility basics, evaluation methods and tools. The training evolves into an accessibility audit as squad members collaboratively capture, share and prioritize findings. The LAWW method compresses a 6-8 week evaluation process into a 2 weeks process while training squad members to detect and avoid accessibility issues in the future. And it can be pretty fun.
This session will explain how to bring LAAW to your organization
Don't Panic! How to perform an accessibility evaluation with limited resourcesMichael Ryan
Being tasked with an accessibility evaluation is can be daunting. How can you measure accessibility? What disabilities are the most important? What tools do you need? How long will it take? Where do I start? What does "accessible" even mean?
These are all questions I asked myself last year when I performed my first accessibility eval. This session will share everything I learned since then in performing three accessibility evaluations.
Answers the following questions
- Why should you get a mentor?
- What are the different kinds of mentor relationships?
- Where can I find a mentor?
- What should I expect from the relationship?
- How do I engage with my mentor?
- How can I give back?
Link to video
http://igniteshow.com/videos/motivational-lessons-mentees-0
Rock! Paper! iPad! Comparing UX Tools on the iPad to Traditional MethodsMichael Ryan
Digital tools offer many advantages over traditional paper methods, but paper is generally preferred for its convenience. Apple’s iPad offers a form factor and interaction model which is more convenient than PCs for some tasks allowing it to challenge paper methods and realize the full benefits of digital tools.
Since April of 2011 I have been substituting paper and PC tasks for iPad tools on many UX activities in my position as an Interaction Designer. I found that the iPad offers a viable alternative for many UX tasks and has become my preferred method for some. Other tasks are more effective using paper or software in a PC environment. This session will summarize these experiences, report survey results of iPad usage by UX professionals and compare the advantages and disadvantages of paper, PCs and the iPad.
Folksonomies: Diverse, Democratic and Evolving ClassificationMichael Ryan
As the Internet and computer systems grow in size and complexity, users are having more difficulty finding web objects. Traditional top-down taxonomies are being assisted by the bottom-up approach of folksonomies. This classification system is a result of the aggregation of social tagging in the user’s own language (Vander Wal, 2007). Folksonomies have emerged as a powerful component of the Web 2.0 landscape. This presentation explores the current state of folksonomies.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
3. #HamburgerWarsWhy are people using them?
Rdio
● Space is scarce on mobile
● Minimal navigation gives a clean look.
● In a responsive design you can have
consistent navigation and reuse code.
● It’s on a lot of apps. Users that don’t
know what it means yet will learn.
4. #HamburgerWarsWhat I have seen in usability tests
● Most participants did not notice or use
the hamburger menu.
● Many failed tasks when the hamburger
menu was required. (see chart)
● Several participants had seen the icon
before but didn’t know what to expect.
Six Usability Tests (December 2013 – June 2014, 138 Ps)
71/75 Failed
5. #HamburgerWarsHave others had similar findings?
http://www.exquisitetweets.com/collection/lukew/2919 https://twitter.com/jmspool/status/441224973047574528
7. #HamburgerWars
1. Many users don’t know what to expect. The 3 line icon doesn’t have
a clear metaphor & is used inconsistently.
2. Moving your navigation under an icon has consequences:
a. Users have to memorize what is in your menu.
b. It provides poor wayfinding.
c. Its location is separated from content weakening the mental
connection.
3. It encourages us to include everything from desktop in
responsive designs. This can create giant and cumbersome
menus on mobile.
Why shouldn’t you use a hamburger menu?
9. #HamburgerWars
Feedly: Menu & All Music: Reorder Various: Scroll Instagram: List
Chrome: Options GoodReads: List
Docs: Icon, Menu
& Comment LinkedIn: Search
Photos: Reorder Pintrest: Filter Amazon: Menu & List Stocks: Reorder
Inconsistent use
Three line icons are used for many things.
Sometimes in the same application
10. #HamburgerWars
Soundcloud: Menu GDrive: Menu Gmail: Apps Menu GDocs: App Icon
Word: List GDocs: Line Width Live Nation: Comment GoodReads: Tile view
GDocs: Justify Android OS: Filter USAToday: Menu FlipKart: Menu
Many similar icons
There are many icons similar to the hamburger.
Some are menus and some aren’t.
11. #HamburgerWarsTesting the hamburger icon
Exis Web A/B tests
http://exisweb.net/mobile-menu-icons http://exisweb.net/mobile-menu-abtest http://exisweb.net/menu-eats-hamburger
1. February 2014 - 20K users.
2. February 2014 - 50K users.
3. March 2014 - 250K users.
Won by 20%
12. #HamburgerWarsIts direct effect on revenue
Diamond Candles (December 2014, sample of 240K)
All variations of the icon improved revenue by more than 4%.
Pink background version with menu label improved it by 6%.
http://conversionxl.com/testing-hamburger-icon-revenue/
13. #HamburgerWars
I wonder who won the game? Do
these guys have a sports
section? I don’t remember.
Open the
menu and
scan down
until you
find sports.
Did I download
the new Felicia
Day book?
Glance up to
Authors.
iBooks
Hamburger menus force you to remember what is in them.
Visible navigation only requires a glance retaining context.
Hamburger Menus use Recall Over Recognition
14. #HamburgerWarsNavigation removed from content
Menu is
integrated with
content and is
easy to reach.
Menu is
separated from
content making
it easy to miss.
TwitterMyDisneyExperience
When menus are close to content and have similar
coloring, they are mentally connected.
http://www.lukew.com/ff/entry.asp?1927
17. #HamburgerWarsEffects of switching to a tab bar
Redbooth (January 2015)
Switched to a tab menu
● Number of sessions doubled
● Daily users increased 65%
https://redbooth.com/blog/hamburger-menu-iphone-app?
utm_campaign=iOS_Dev_Weekly_Issue_181&utm_medium=email&utm_source=iOS%2BDev%2BWeekly
18. #HamburgerWarsFacebook & NBC removed it
http://www.engadget.com/2013/09/18/facebook-ios-app-update/
2010 September 2013 February 2014
July 2014
20. #HamburgerWars
1. Consider a horizontal menu for
your most important tasks
A tab bar is less than 10% of your total height.
2. If you are going to use a
hamburger menu, label it
and make it stand out.
Recommendations