Patterns in Interaction Design Accordion Problem The user needs to find an item in the main navigation Solution Stack panels vertically or horizontally and open up one panel at the time while collapsing the other panels From ASP net Use when Accordions are often used as part of Main Navigation or subnavigation. How Many different variations of the Accordions exisit, both vertical ones and horizontal ones but the crucial aspects of the implementation are: Only 1 panel is open at one time. Why An accordion is useful for compressing many elements in a compact space. The vertical ones are quite common although they do not always animate nicely. More Examples At the Donna's body vison , an accordian is used for displaying subnavigation without requiring a page-reload: At Pixellab a small accordion is used to display several recent projects in a very small area: At Daniel Richards a horizontal accordion is used to give the site a non-conventional feel: The XBox 360 interface also uses a horizontal accordion: Implementation Literature
flow|state: Matching design sketches to the desired level of des When you ask people for feedback on a design that has not yet been implemented, take care how much polish you put on the design's representation. A counter-intuitive principle of soliciting early design feedback is that people reviewing a highly polished design may concentrate on superficial details and overlook fundamental issues. In the early stages of the process, you may be able to elicit deeper feedback by striving for an unfinished look in your design representations. Even novice designers can employ production tools like Adobe Photoshop or Flash to quickly work up beautiful conceptual screen shots or prototypes. They can lavish attention on the presentation of early design concepts, even those that might be thrown away. However, when such a design is shown for review, reviewers may fixate on such details as the color on a button—and fail to question why the button, or indeed the entire screen, needs to exist at all.
UI Design Pattern Library Napkin Look & Feel qooxdoo » Home