SITE MAPS/ INFORMATION ARCHITECTURE
Duration of Week 2:
I.A -Information Architecture
Creates A hierarchy Organizes meaning-plans categories
Navigation -Information Architecture
You go to do something if you cannot do it it fails
Good navigation orients the user
User goes to websites for two reasons
If the user know what he wants to do — build it for him to do it
If you are at a kinda state — thats discovery
There is no connection between the site map user flow- and visual — Moving through content is changing
Navigation connecting people through content
The thing that connects everything
Navigation is a set of options the user has at each level of the UX
Some things can look really really cool- but not task based.
When we think about navigation- things are grouped together you expect them to be there so you can do your task.
Navigation
“Cognitive proximity”
Start with what the user already knows
what are the next things they might want to do
what do the do most often
good navigation
supports the primary task that visitors come for
avoid vague terminology- is persistent-even if you don’t know what the content is but your best educated guess foot forward
If you don’t organize it you can’t prioritize it-Your website is a conversation
Its not the first impression- its getting through to what you need to do.
one task is not the experience
SITE MAPS
Extension of IA research
typically one of the first deliverables
informs database design and navigation design
typically kept up-to-date
This is the Blueprint: you are saying in the system what goes where.
We have to make order of our system in order to communicate- we have to account where things go and then account for them in U.I
SITE MAP IS THE WAY IT IS STRUCTURED: U.I IS THE WAY OF NAVIGATION
HIERARCHY — Translate into database
WEB LAYOUT AND WIREFRAMES
“Page layout is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page.”
THE BASICS:
- Good layout is an art and a science
- layout is learnable
- websites usually consist of a series of templates
- conventions help us design and help users understand
GOOD LAYOUT
- Users can scan the page
- users can quickly find what they want
- users can learn the interface quickly
BAD LAYOUT
- Users have to work to find what they need
- Users are less efficient at accomplishing their tasks
- users may become lost of disoriented
LAYOUTS- GLOBAL LEVEL- HEADER ON PAGE
5 WIDE — 3 DEEP
C.R.A.P
CONSTRAST — REPETITION — ALIGNMENT — PROXIMITY
CONTRAST
- Elements that are visually differentiated direct the eye and the viewers attention
- Elements with the greatest contrast are perceived as the most important
- Contrast can be created through size, color, shape, and more
REPITITION
- Repetition creates consistency and continuity
- Repetition within a page cases the repeated elements to be perceived as similar to each other
- Repetition across pages help users track non-essential elements in they periphery
- Keep colors, type styles navigation and branding consistent
ALIGNMENT
- Aligning elements on a grid helps to guide the eye and reinforce relationships between elements
- Grids can create effective negative space that helps users define distinctions between elements
- Alignment makes pages easier to scan
-We must afford for (-) Negative Space- when things come together they make noise.
-Do not design anything with out a grid- helps you design elements; rules of layout
PROXIMITY
- Items that are together
- The closer they are the more they are related
WEB PAGES ARE INSTANCES OF TEMPLATES
- Don’t think of each page individually — think of types of pages
- Similarly, think of types of elements and content
- Designing in this modular fashion helps you create consistency across multiple pages and templates
LEVELS OF MODULARITY
- Global- are consistent ALWAYS- never ever change ever.
- Common- on multiple templates; but not on all
- Template-specific
- Page-specific (not modular)
on every product there is a price $
CHOOSE THE RIGHT GRID
- 960 — Web — represents width; and at 960 pixels
- Golden Grid
- Responsive Grid
- Other
TIPS FOR DESIGNING MODULAR LAYOUTS
- SKETCH first and keep it low-fi
- START at the bottom of your sitemap
- Always be thinking about how you can reuse elements
Templates
- Home page
- product listing
- product detail
- search results
- shopping cart
RULE OF THIRDS- two thirds go to the most important 1/3 goes to everything else. Use this for a method of tweaking the design
- user read in an F or Z pattern
- Guiding principle
- used for tweaking
- Place the most significant elements of your designs in the meeting points of horizontal and vertical lines
WIREFRAME
- Sketching simple concepts
- when your refining UI details
- As paper prototypes
- To guide implementation
-This comes before ‘paint job/ or ‘mock up’
ALWAYS CORE IMPORTANCE OF SKELETON OF UX
- still widely considered the primary UX artifact
- Often necessary for projects with many stakeholders
- extremely useful for remote teams
- it boils down to — core structure
PRIMARILY A COMMUNICATION TOOL
- Design concept or intent
- Hierarchy of elements on a page
- Functionality
- and often
- page layout
- relative proportion of items
CHALLENGES
- Living documents- aways must keep them up to date; if your flow changes- your wire changes
- Separating the concerns of structure, navigation, layout, interaction
- Fitting the level of detail to the audience
- Explaining the wireframe to client
WIRE FRAME VS MOCKUP
- Wireframes are mostly black and white and focus on structure and elements; usually they come first
- The term “mockups” generally refers to the visual design of interface, including graphics, typography, etc; usually they are prepared in photoshop
- many II/UX designers skip the wire framing step; this is not recommended because you need to do two things at once
WIREFRAME FIDELITY
WIREFRAMES CAN BE LO-FI OR HI FI FIDELITY
- BLOCK LEVEL DIAGRAM
PIXAL PERFECT DESIGN VS MOBILE DESIGN
FOCUS- FOCUS FLOW- FLOWING OUT
- SKETCHING ALWAYS STARTING POINT
- KEEP IT SIMPLE: BLACK AND WHITE
- JUSTIFY EVERY ELEMENT ON EVERY INTERFACE
- ANNOTATE AS YOU GO ALONG
- DOCUMENTATION SYSTEM MODULAR
