The Skeleton Plane Flashcards
There are 3 parts of the skeleton plane… What are they?
Interface design, navigation design, interface design
If the structure plane defines how the product will work, skeleton plane defines
The form the functionality will take
Define interface design
The realm of buttons, fields and other interface components - it allows users to do things
Define navigation design
The specialized form of interface design pertaining to presenting information spaces - it allows users to go places
Define information design
The presentation of information for effective communication - communicating ideas to the user
It’s important to separate the three types of design covered here so we can
Tell the difference between different types of problems and later tell if we’ve solved them
You don’t have to slavishly follow conventions, but if you deviate you
Should have good reason
Interface designs dealing with the same conceptual models in your product should be
Consistent.
Metaphors can be useful if there specific enough, sometimes, but you should be cautious with their use. Give an example of a good and bad metaphor
Good: icon of a phone book to represent a phone directory.
Bad: picture of a coffee shop to represent chat area
What is interface design all about?
Selecting the right interface elements for a task the user is trying to accomplish and arranging them on the screen in a way that is easy to understand and use
What makes for a successful interface?
The user immediately notices the important stuff - the stuff required for the action they’re most likely to take
What three goals must navigation design accomplish on any site
Must provide users with a means to get from one screen to another… Not every page can link to every other page
Navigation design must communicate the relationship between the elements it contains
Third, navigation design should communicate the relationship between itself and the page the user is currently viewing
Name and describe all the different navigational systems
Global navigation - provides access to broad sweep of entire site - example: navigation bars in header
Local navigation - access to nearby pages, aka parents, children and siblings
Supplementary navigation - shortcuts to related content… Sort of like how searching by red shirts versus expensive shirts is implemented
Contextual navigation - inline links, hyperlinks. Often misutilized.
Courtesy navigation - provides access to stuff users don’t regularly need… Links to contact info, feedback forms, etc.
What are remote navigation tools?
Navigational tools not embedded in the structure of the page that stand apart from the rest of the content and functionality of the site.
What is a site map?
site map is a common remote navigation tool that gives users a concise, one- page snapshot of the overall site architecture.
They usually show just top level pages and second level pages indented beneath them
What is an index in a website? When is it useful?
A big list of topics on the site, similar to an index on the back of a book. Good for sites with a diverse range of topics.
What does information design come down to?
information design comes down to making decisions about how to present information so that people can use it or understand it more easily.
It can be visual (choosing an icon)
It can be about grouping and arranging (name>job title > organization > street address)
What is the key to information design?
To group and arrange the information in a way that supports how the users think and supports their goals. It’s like micro-level IA
Anytime the system has to give users info for them to use it that’s a ….. Why?
Information design problem.. Users won’t read stuff!
What is wayfinding?
Helping users understand where they are and where they can go.
What parts of design are concerned with wayfinding? How?
Information design - non navigational components of the site such as color coding, icons, typography and etc.
navigation design - don’t just provide access to different areas of the site, communicate those choices clearly
A wireframe is what
A barebones depiction of all the elements on a page and how they fit together encompassing the navigation, interface and info design supporting these AND info design of the content itself
Any wireframe will probably need these components
Global nav Wayfinding cues Courtesy nav Local nav Supplementary nav Content
Who will use the wireframe?
Almost everyone involved in the development of the product… Visuals, strategy and so on
What is the real value of wire frames?
The value of wireframes is the way they integrate all three elements of the structure plane:
interface design, through the arrangement and selection of interface elements;
navigation design, through the identification and definition of core navigational systems;
and information design, through the placement and prioritization of informational components.
If the skeleton plane deals with logical arrangements, the surface plane deals with..
Sensory design and presentation of the elements that make up skeleton
