UX — Skeleton (Part 6)
Structure defines how content is organized and areas of interactions, and Skeleton defines what the form, presentation, & arrangement of things defined in the Structure. Skeleton has three components; Interface Design, Navigation Design, & Information Design.
This is a long series of tutorials. We are going cover:
Interface Design is the presentation and arrangement of all the elements that makes us interact with the functionality of the system.
Navigation Design enables user to see and move through the structure, and how to move through information.
Information Design is concerned about how information is presented to make it effective, clear, and obvious.
These three elements are closely bound together, because you can’t think about interface design without information design(how information is presented clearly) and navigation design(how to present and move around structure and information).
Although they are closely bound together, we need to tell the difference between the types of problems, So, we can tell if we’ve really solved them. So How to separate between them?
- If it involves allowing the user to do something, It’s interface design.
- If it involves provides people the ability to go somewhere, It’s navigation design.
- If it involves communicating an idea or a message, It’s information design.
Interaction Design Vs Interface Design
Interface design doesn’t say how the user will interact with the system — it’s interaction design — but, it decides on the presentation and arrangement of those ways interactions, thus, allowing the user to interact with the functionality of the system.
Information Architecture Vs Navigation Design
Navigation design doesn’t say how the structure will be — it’s information architecture — but, it enables user will see the structure and move through it.
Conventions
Convention is a way in which something is usually done.
In order to design anything successfully you have to have strong understanding of conventions, because we(as human begins) consider our habits in our daily interactions in a way that’s reflex. So, our ability to do anything depends on our habits and accumulation of previous experience.
Conventions often match our expectation of how things supposed to be or to do, this happens when we see something that’s familiar, since we know what to do with it, because we used it before, and we understand it, so we expect this thing will be used same as we used before.
So, when to deviate form a well-established convention?, when there is a clear benefit from doing so. Most of the times, the deviation is minor(doesn’t really affect on the user core conventions).
Interface Design
Interface designs acts like a boundary between the system technical function and it’s presentation. An application or site whose interface is difficult to use, won’t be used, no matter how technically superior the code is.
Principles of Successful Interface
Predictability
All buttons, icons, images tell us what to do, what will happen, where user can go, how the system will respond.
So, user can predict the outcome when user interact with something, and the more user can predict, the higher the confidence user will have to use what’s in front of us. The more confidence user will have, the more likely users will use that something, thus we can deliver the value.
Consistency
All ways of interactions with the system functionality should be displayed in similar way across the whole application. Consistency means we are leveraging what users already know, and it simplifies usability.
Progressive disclosure
Only necessary, or requested information should be displayed, other than that it’s a noise, That’s it.
As an example, showing a summary of all articles in the homepage, and if the user wants to get deeper into an article, the user will have the choice to click on it. So, you are moving from simple to complex, and this helps users to manage complexity without becoming frustrated.
Easy to learn, and easy to remember
All ways of interactions with the system functionality should be easy to learn, and easy to remember. You can do that by having a consistent layout, it’s aligned with user conventions, and it can be predicted.
More choices, more time
Every additional choice increases the amount of time required to make a decision. The more choices you give people, the easier for them to choose nothing. Using filters can be a solution to narrow down a large set of information, based on user preferences, and so decrease time required to make a decision.
The Role of Information Design In Interface Design
Information design plays a role in interface design problems because the interface must not only presents ways of interactions, but communicate information to the user as well.
Any time the system has to give the users some information for them to use the interface successfully, that’s an information design problem that helps in creating successful interfaces.
Good Information design presents components and information in a clear hierarchy and proper context, meaning things we see on the screen are all related together, they are organized, prioritized in a way that shows the relationship between information clearly. That’s all help in creating successful interfaces.
Navigation Design
Good navigation design should make the user answer these questions at any part of the using the application; Where are you, how did you arrive here, what can you do here, where you can go from here. If the user answered the previous questions, this means the navigation design provides a strong scene of what to do, and where user can go, and so it meets user expectations.
Principles of Successful Navigation Design
Increase the ability to find what you want
It Increases the ability to find what you want, and this can be done through:
- Browse using navigation system.
- Searching for keywords of phrases.
- Using filters to narrow the sets of information.
- Using pagination to move around sets of information, and know about current location, & get scene of depth.
Reveal depth
It reveals the depth of structure and information even before users move around the site, and this can be done through:
- Using sub-menu on main navigation on move-hover.
- Using search results, which gives the volume of information, along with filtration and pagination.
- Using indicators to provide sense of where the users are, like using breadcrumb.
Information Evidence
While the user is moving through the site looking for something, we need to give the user an evidence that what they are looking for is there.
As an example, if the user is exploring the navigation menu looking for a category or sub category. If the user didn’t find what he is looking for, or didn’t see an evidence for that, he will leave.
Navigation menus aren’t the only way
They aren’t the only way to move through the information. Links within content, search, filters, tags, …etc are also ways for navigation. Although they mightn’t be the primary ways for navigation, they are equal important, and needs to be considered to move around the information.
Clear icons and labels
Icons should have a clear meaning based on their similarity to familiar objects or actions. And, if they require experience to learn their meanings, you may add label under an icon to describe that icon.
But, if, in case users are usually busy while using the application, so it doesn’t make sense to use icons that require time to understand.
Also labels should be meaningful for the navigation, so, don’t use acronyms or abbreviations. This will reduce cognitive effort by ensuring navigation is clear and understandable.
Chasing information
Navigation isn’t, and shouldn’t be a treasure map. Don’t force users to chase information, or features they need, instead you want them to find whatever they look for quickly and easily. This will reduce memory load by ensuring navigation are visible, & findable.
Consistency
Navigation should have the same style across all the screens. It shouldn’t appear and disappear, rearrange their order, or move to a different location. Consistent navigation should look and behave the same the next time the user will use it, so, user can focus on the what’s important(i.e. content).
Information Design
Information Design primary purpose to present information to users so they can understand it easily, and quickly. Information Design focuses on how to communicate information, and make it understandable, and appropriate.
Good Information Design supports the user and business goals. When information design fails, everything else will fail too. You can’t have a good navigation design or interface design without good information design.
Appropriate organization
Information is valuable when it supports the task we are trying to achieve, hence they have a proper context, and proper context helps to achieve the task we are trying to do. So, group and arrange information in a way that they are related, and match how users think, and what they expect, & support users tasks and goals.
There are ways to arrange & organize information:
- Alphabetical(i.e. dictionary, contact list): alphabetical is always the default way.
- Categorical(i.e. e-commerce site): grouping related information into categories.
- Continuum(i.e. search engine): showing results from most to lowest, smallest to largest, …etc.
- Location(i.e. maps, travel guides): information related to or grouped based on locations.
- Time(i.e. events, movie shows): information related to or grouped based on specific time
Appropriate Form
What’s the best form to represent the information. Inverted pyramids is an approach to present the information from most to less critical, or important.
It starts by the most critical information, this is the conclusion, which is the who, what, where, when and how. The information has to be delivered in order to make sure we communicated our message successfully. So, no matter how the user wants to get deeper into the information, the important information has been already delivered.
Wireframes
It’s time to take all what we have learned into a visual format that’s look like a layout called “Wireframe”. This is done by rough sketching each screen of the application, usually using a software.
What Wireframe shows
- It’s the skeleton of the screen, it shows the priority and the organization of the elements on the screen.
- It tells how to navigate between different parts of the application.
- It demonstrates how users will interact with what’s presented.
- It reflects the designer’s ideas about the placement of elements in the page, navigation, functionality, behavior, interaction, and feedback.
However, Wireframes don’t show colors, typography, images, visual style of any kind.
Wireframe is a string point
What we are creating is not the final design, because what we are creating can be changed through the project process. So, it’s perfectly normal that the final product doesn’t exactly reflect the wireframe.
Wireframes vary in their level of detail
Wireframes can vary in their level of detail depending on complexity of the application.
You may present and show arrangement of elements on the screen, and how to navigate around using the text titles, content, and forms, Or, you can use placeholders(like text replaced by lines), so that you aren’t distracted with the details.
Don’t rush into using the tools
Don’t rush into using the tools for sketching, you need first to sketch using pencil and paper. Going through this phase will help you to get rid of the garbage in our heads, and will allow you to think more clearly as you move forward. Each sketch for every page shouldn’t take much time, usually it takes from 1 to 2 minutes.
