![]() ![]() We placed the accordion icon to the right of its associated label, close to the edge of the screen and right aligned. An example of one of the prototypes, shown in all 5 icon variations The icons were randomly assigned for each task, meaning that participants saw a random assortment and order of these five icons. The icons tested in this study included a downward-facing caret, a right-facing arrow, a plus, a nonsense foil icon (used as a control for comparison), or a blank space. ![]() ![]() We created a foil icon (that had not been used before for accordions) in order to see whether the type of icon mattered at all or the presence of an icon next to the accordion name was enough to signal an accordion (but the icon itself did not matter). We also created 5 different variations for each prototype each variation used one of 4 possible icons (an arrow, a caret, a plus, a foil) or no icon. For example, on a prototype of consumer-goods review website, the task was “Find reviews of dishwashers.” The prototypes were not interactive they were simple mockups with the menu already open and a list of categories visible on the screen, to ensure that we were only measuring the interaction with the accordions, as opposed to users’ efforts to locate the menus, look at homepage content, and so forth.įor each prototype, we created a task that involved finding information in one of the accordions visible in the prototype. We decided to study the accordions in the context of mobile navigation so we created 11 prototypes of mobile websites, each in a different type of industry - clothing ecommerce, big-box retail, auto parts, finance, news, local government, higher education, DIY home projects, consumer-goods reviews, healthcare, and travel. We performed a quantitative study to find out which of these icons is the most effective at signaling that it will open an accordion. Jennair: Accordion signaled by caret icon Bolé Road Textiles: accordion signaled by plus icon Ferrari: accordion signaled by arrow icon Braun: accordion with no signifier icon Also, after expansion, the caret will typically twist (maybe in a nice quick animation), and a plus sign will turn into a minus, to become a signifier for the reverse action of collapsing the newly expanded content. There are some subtle differences in what these icons are commonly used to represent - while the caret and plus icons are typically meant to indicate that an accordion will open, designers have used the right-facing arrow icon to signal two different actions: either staying on the same page and expanding content, or visiting a different page. ![]() We looked at several possible icons as signifiers for accordions: We decided to investigate this question as part of a bigger study of navigation and subnavigation on mobile. For good reasons, accordions are a popular UI element today: on mobile, they are an essential tool because they collapse content and make page length manageable, but even on desktop, they mitigate visual complexity and allow users to focus on the content most relevant for the task at hand (and are particularly appropriate in complex applications).Ī question that is often asked in both our Mobile UX and Application Design classes is: which icon should we use to best signal that content will expand in place? In other words, what’s the best signifier for accordions? ![]()
0 Comments
Leave a Reply. |