UX SKELETON (Garrett) — DAY 11

Source: http://www.boostlabs.com/wp-content/uploads/2013/02/ui-design-devices.jpg

So we arrived to the skeleton level from Garrett’s 5 planes structure. At this point, the project is becoming more and more concrete, as the team already developed a strategy, defined a scope, and created the basic structure.

So, what’s now?

The skeleton is the part when the design team will start refining the structure, identifying aspects related to the interface design, navigation design and information design. This is when the previously defined functionalities will take form, and when the designer will go to the detail of each individual component and its relationships.

Source: The Elements of User Experience: user-centered design for web and beyond (Garrett, 2011, Pg. 29)

As you can see in the image above, there are 3 sub-divisions in this plane: the interface design is related to the product as functionality side, the navigation design takes place on the product information side, and information design is related to both. Let’s take a look at each one separately:

  • Interface design — it involves providing the users the necessary abilities to do things. It is related to the way that the users actually come in contact with all the functionalities defined in the specifications and structured in the interaction design. Here is when the team selects the right interface elements for all the tasks that the user has to accomplish, arranging it in a way that they will be promptly understood and easily used. So, this is about defining how the functions will be realized on the screen, making the user notice all the important things, and taking any unimportant thing off. Garrett also give some tips for the interface design. As he says, the default options marked in a form, for example, are usually the ones that most of your users will choose, so be careful with it and, when possible, make your system able to remember the users’ last options when they have to enter information frequently.
  • Navigation design — it covers to give the user the ability to go places and to keep the where I am notion. The three main goals here are: provide users a way to go from a point to another, facilitating the navigation; communicate the relationship between elements through a good hierarchy; and communicate the relationship between the current page with the others (where I am). In navigation design there is a concept called navigation systems, and it is related to the role that such navigation assume inside the whole system: global navigation: it permits access to the entire website; local navigation: provide access to everything that is ‘nearby’ the user’s current page; supplementary navigation: provides shortcuts to related content, usually used when the user wants to shift its focus without going back to the begin; contextual navigation: this is related to all the information that is embed in the content. Usually links are a very good example; courtesy navigation: this is about all that information that is not needed during all the time, but is necessary, as business hours, contact and policy; remote navigation: it is not embed in the structure, it is an independent navigation and sitemaps and index pages are good examples.
  • Information design — this is directly related to the quality of your design. It involves the abilities that your website has to communicate ideas to the user, supporting the interface design, the navigation design, and, the whole system. It defines how the information will be presented in order to make it easy to the users, organizing and grouping the information according to how the user think. It helps him to achieve his goals and complete his tasks. Some examples would be messages and instructions.

At this moment, the team is focused on any problem that show up, solving it and, most important, validating the solution. This is when you want to validate every decision you make, usually through tests with users. As this is the last step before start designing the surface of the website, every decision must be very consistent and rooted in validations.

Garrett also explains that habit and reflex are the foundation for mostly of our interactions with the real world. He says that if we couldn’t reduce our tasks to habit and reflex we would have to think about every little action, spending a lot of time and making our life way harder. In order to help your users to think easily, conventions come up as a very useful strategy. We already discussed about it when defining the structure, but at this time, Garrett defends that you must go with them and, if you won’t, you should make sure that your option is better and offer clear benefits.

Websites, in general, follow conventions in order to create consistency. For example, the logo will usually be located in the top-left corner of the website, the navigation menu will be on top, or, also in the left side. Some other conventions like shopping carts, the play, stop and pause buttons in a video, and so on are also very useful to avoid your user to have to think about ordinary things. If you have multiple pages, consistency is also something you should be aware about. You should follow the same rules all along your pages, making the user more comfortable and encouraging him to browse.

Metaphors, in the other hand, says Garrett, are usually a bad idea, as real world products follow real world’s constraints that are usually not real online. If you make your user guess while he is browsing, the index of mistakes increases and you may make him to leave the page. If you chose to go with this kind of strategy, go with direct associations, not unnecessary metaphors.

A very known tool used at this part of the process is the wireframe. Wireframe is the tool that integrates interface design, navigation design and information design in a picture of the desired product. It can be developed in high or low level of details and is pretty much one or more sketches of the final product, that will show how every element will be placed in the page. Some designers make it by hand and other make it in specialized softwares, and, even though there are a lot of different kinds of wireframes, they all have the same final objective: document the skeleton of the page.

Wireframe example. Source: https://1.bp.blogspot.com/--HBlVwMIYlg/VxlXVVQWAfI/AAAAAAAAD4A/ODJLxFcehEceMSf4MSNs5nxCAg9YTzVRQCLcB/s1600/wireframe1.jpg

This is how Garrett describe the skeleton level. Nowadays lots of designers use different tools on this part of the job. What about you, what are the tools in your UX toolset for the skeleton level? Hope to hear from you in the comments here or in our facebook page!

Visit us at aboutusers.com if you want to know more about the 100 days challenge about users!

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.