Nielsen Norman Group gives some criteria on when to use accordions and when to avoid using it. I just saw this right after reading this article. Users shouldn’t feel like they are losing menu options when they collapse the menu. This is by far an odd concept but it works great on their website. Things like (demographic, ethnography etc). They allow you to display a large number of menu options while conserving space. Other common choices are dropdown menus which appear on hover – but accordion menus don’t slide over the page since they’re built into the page. They’re more inclined to click the label and don’t think they have to click the icon to expand the menu. These two elements are usually misconstrued by assuming they have the same role. The hamburger icon went into hibernation for several years, but gained popu… Arrows & chevrons are clearer to me. But I’m missing a link to the actual study you are referring to. 140 0. I’d like to wrap up this post by offering a collection of free open source code snippets. I certainly do not want my accordion menus to signal the ability to add new objects (When it’s not possible, and does not make sense even if we implemented it that way). Design Should Concentrate on User Experience. This means when opening a new section the previously-open section will close. You’re not the user and don’t behave the same as them. It doesn't work because it's confusing. Usable: Site must be easy to use 3. A user experience design blog dedicated to teaching you the best practices, design techniques and principles that will make your interface intuitive and easy to use. When the accordion displayed plus icons, users expected the menu to change. 113 0. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript and more prominently jQuery. Forcing people to click on headings one at a time to display full content can be cumbersome, especially if there are many topics on the list that individuals care about. What the Web UI Design Best Practices Guide Will Teach You. Useful: Your content should be original and fulfill a need 2. If the accordion is higher than the page, users can't see some of its options. A concur that there is a much greater confusion in using the plus, which is that of adding to the current collection. There is a point of view that UI design is something that is more artistically grounded (for those who have graphic, visual skills), and All of the above are important considerations when designing mobile apps and websites. May be the accordion icon could be choosen by some sort of platform sniffing. Also, what is the perception users have when you use the down arrow as the icon? This is likely to happen when two or more panels can be opened at a time. Very interesting, but isn’t it a bit conceptual? A “dropdown arrow” icon intrinsically implies an expanding movement. Jun 27, 2016 - Explore JD's board "ux: accordion" on Pinterest. People instantly think “add”….And am I adding another row? 2. This is the UX Design Process Best Practices ebook, written by Jerry Cao, Ben Gremillion, Kamil Zięba, and Matt Ellis, and originally published on You are not the user. 9 UX Design Best Practices and Ideas for Banking Websites. Getting back to Codrops I found another great tutorial covering an image accordion with CSS3. Read the study again. Thanks for the insight. This finding makes sense because the plus sign is the mathematical symbol for addition. Translation for B2B websites: Always tell your buyers where they are when navigating your site. Interaction design patterns can be thought of as the summative learnings of what has worked well in the past. When they see it on an accordion menu, they expect it to behave the same way. Many interfaces make use of add and remove features- particularly when dealing with shopping interactions or user management. But before you use them, you should know the optimal way to design them for your users. I failed as a designer at a startup – UX Collective. Most people are right handed and moving the mouse to the left side to click “takes more time”…common sense usability points to the right side for icon placement. The “+” icon comes with too many assumptions and baggage. The effect is really cool and surprisingly supports click events. User experiences are important aspects of eCommerce websites. See more ideas about App design, Accordion, Ui design. Not every project should rely on accordions to best manage content. The source code is free to download but it should really serve as an example describing how this interface might work. That said, Microsoft has now gone for an even stranger choice of chevrons pointing up or down for open and close in their OneDrive site for navigating a file hierarchy. This [new] site has the plus sign on the right hand side, then to show the open state they convert the plus to a minus sign. What may seem right to you may not be right to them. Author and founder of UX Movement. I am personally more convinced with arrow / chevron as mnemonic for dropdown as opposed to (+) which is commonly found more in forms to add more fields or more items. Can we get more details about it? The chevron and caret are something that people are used to. Do you have a link to the source research study? He notes that in order for there to be a meaningful and valuable user experience, information must be: 1. I like to think of accordions as content management tools. The advice to use a + rather than an arrow suggests to me a strong Windows bias. The plus icon is the clearer affordance for menu expansion. The nature of an accordion would call for automatic collapsing, but it might not be the best option in terms of usability. Which icon you choose and where you place them affects how users use accordion menus. Nowadays the biggest concerning factor would be the total number of visitors who don’t have JS-supported browsers. With more and more companies wanting to embed UX writers in their design teams, it’s vital to understand what the role of the UX writer entails and how it … I have been trying to educate designers for years, that just because something looks good doesn’t make it more functional. You can’t not gauge what “most users” use and what about keyboard only users, mobile users can completely switch from their dominant mouse hand. UX stands for User Experience while UI refers to the term User Interface. Idea Theorem is Toronto based UI UX Agency. But there are additional mobile UX best practices to follow to ensure the best possible user experience. Accordion v/s Tabs — When to use what while designing kick-ass UX! Making the experience of the website memorable is more important than what the website says. I also strongly disagree with the advice to use a plus icon. Users can misinterpret the minus icon because it often represents removal or deletion. Your email address will not be published. Page headers.The page header should resemble the copy of the navigation items or links. When you think of UX, you think of providing visitors with an amazing experience. In accordion-style this can take many forms as vertical, horizontal, slidable, tabbed, you name it! Why? Each sample demonstrates the power of accordion content whether in a navigation, FAQ listing, or tabbed widget. Best Practices for Accordion Menu in Web Design . 1. I’m going to change it on my site now. Mobile UX Best Practices. All rights reserved. Why do we need an icon at all? There are two common icons used for collapsing: the minus and X icon. where would you place the plus? When I read the article, I couldn’t quite agree with the plus/x icon in the shoes of a user, but thanks to your link (nice transition from plus to x by the way) I think I’m one step closer to understanding and agreeing it.