UX — Structure (Part 5)
After the requirements have been generated, prioritized, negotiated, and specified. The next level, is the Structure. Structure is split into two parts, Interaction Design & Information Architecture.
This is a long series of tutorials. We are going cover:
Interaction Design is concerned about the options, or ways of interactions that someone has to accomplish their goals, while Information Architecture concerned about how information conveyed to the user.
Interaction Design (IxD)
Any time we use a product, we interact with that product, and system responds to that interaction. Interaction design is concerned with describing possible user interactions and defining how the system will respond. These interactions helps people to accomplish their goals.
It effectively communicates interactivity and functionality(what user can do), informs user about state changes(file has been saved, or any feedback) while they interact. It also prevents user errors or mistakes, like when the system asks user to confirm potentially harmful action(i.e. deletion).
The Five essential principles of IxD
There are many, but, these are the most important, these principles what make a good interaction design.
1. Consistency
When we design a layout, we set expectations in the user’s mind about how things might work, and on how to move around the content, and they have to remain unchanged across all web pages, they have to remain consistent across the whole application.
While the content may change, the basic interactions and the process the user go through should stay the same, and aligned with what users already know.
Be different only when it servers a purpose
You need only to be different when it’s better, be different when it servers a purpose, be different when it doesn’t make the user confused, or frustrated.
As an example, when user is at the homepage, and clicks on an article, the content of the web page changes(need to be different), but the expectations on how to move around like navigation bar will remain the same(no need to be different).
Components with similar behavior
Components with similar behavior(i.e. alert messages, tooltips, …) should behave the same across all the screens.
Design Patterns
Design Pattern is a reusable solution to a problem, like drop-down menus, and login fields. It makes actions and results consistent and predictable with what people already know, because you are using design pattern that has been used before by users.
They have been used everywhere, and tested over time, hence people will understand and accept it, and there is no reason to re-invent the wheel. So, we are leveraging what users already know.
2. Visibility
The opportunities for interactions should be visible, so users can see what’s possible.
Deepening on the chance for the users to discover the available interactions is never a good idea, and probably they will leave, because they didn’t find any way of interaction that serve the purpose of why they came into your application.
Also, it means thinking about what do people expect the system to do, like when user clicks on a link, the user is expecting a specific respond, such as redirecting to or open another page.
3. Learnability
It means application should be easy to learn and easy to remember, and make it as simple as possible, so they will use it once, or few times, learn it, and hope they will remember it next time.
And because we use and interact with the current application using our previous experience, It doesn’t make scene for the design to deviate from that way of doing things, because that what people already recognize. So, we are leveraging what people already know.
4. Predictability
Users at any screen, or page they should know where they are, how did they arrive here, what they can do here, where they can go from here. If users can answer these questions, It means the design set correct expectations, So, users can accurately predict the outcome of interactions.
5. Feedback
Good interaction deign provides feedback about:
- Location: where the user is now
- Status: what’s happening right now(i.e. uploading a file)
- Future: what will happen
- Results: what has happened or done
For every single action a user can take, the feedback(reaction) should be visible, understandable, & immediate. It’s essential to let the people know that they have been heard or seen.
Feedback should handles error messages. Errors message should describe what happened, explain why it happened, suggest a fix, how to prevent doing this error next time, and it should never blame the user.
Information Architecture (IA)
Information Architecture is concerned with how content is organized, how it’s prioritized, how much of it. It also allows users to move through site content efficiently and effectively. Good Information Architecture creates a structure that’s flexible, and can accommodate growth and adapt to change.
It should organizes the information in a way that provides easy access to the content, appropriate to the audiences, and their level of expertise. Also, structure should corresponds to the business objectives for the site, the user needs we intend to meet.
TIP: Focus on the relationships between content, which categories go together, and which don’t, what are the sequence of steps that can fit together, how to move through the information, based on user needs and expectations.
Structure Patterns
These are the most common structure patters, or ways for organizing information.
Hierarchical
Hierarchical structure, or tree, is the most common structure, where the site has an index page(parent node of entire structure) and series of sub pages(child nodes). Child nodes represent narrower concepts within the more generic category represented by the parent node.
Hub-And-Spoke
It’s same as Hierarchical, it has a central index(parent node of the entire structure), where you navigate in and out from it, but, and you can’t navigate from one child node to another, you always have to go to their parent. A child node can be also a parent node for other child nodes.
Organic
Organic structures are highly adaptable, flexible, and more suitable to quickly adapt to change. If you want to present a set of topics whose relationship is unclear, the organic structure can be a good choice. However, it can present a challenge for the users to move around the structure of the site.
Sequential
Sequential structures are the ones we are most familiar with. Books, articles, audio, and video are all designed to be experienced in a sequential fashion. Sequential structures are used most often for smaller-scale structures such as individual articles or sections.
Tabbed
It consists of a collection of sections tied together by a toolbar menu. It allows the users to quickly figure out, and navigate between the functionality of the application or different topics from the first screen. This pattern is for simple content structure, like simple sites, or tool-based applications.
Facets
Every collection of information has attributes(facets), which can be used to categorize, or group related information. When user has many categories to choose from, they often will be distracted and won’t find anything. So, it’s your job to find the most valuable facets of the information to group information, and create structure based on user needs and business objectives.
Team Roles and Process
Team Roles
There should be a specialist dedicated to issues related to Information Architecture, and Interface Design. And, whether you have a specialist or not, there should be someone who’s explicitly responsible for the Structure.
Visual Vocabulary
The major documentation tool for information architecture and interaction design is the diagram. One of the ways to digram and describe information architecture and interaction design is by using Visual Vocabulary, which is created by Jesse James Garrett and posted to the Web in 2000. A visual vocabulary is a set of symbols used to describe the structure and the flow of a process.
You can learn more about the Visual Vocabulary, see sample diagrams, and download tools for using it at my web site: www.jjg.net/ia/visvocab/.
