session six
agenda
- midterm quiz
- web development process
- site planning overview
- information architecture tasks & deliverables
- information architecture components
- organization systems
- labeling systems
- navigation systems
- in-class exercise
- readings & resources
web development process
typical development process has phases that map roughly to the following:
- Phase 1: Initiation
- Phase 2: Site Planning
- Phase 3: Design
- Phase 4: Coding & Production
- Phase 5: Testing & Launch
- Phase 6: Measurement
site planning overview
- define site objectives - the context of the site. what are the business goals? creative goals?
- defining specific, measurable goals is best
- if there is more than one objective, rank them by importance
- define audience - the users of the site. who are they and what do they need? do they need to do things? buy things? learn something? all of the above?
- define one or more target users, e.g., the ideal audience (personas)
- describe specific, demographic user assessments
- consider user age, gender, budget, location, culture, knowledge etc. - the more thorough the better
- identify content requirements - the content of the site. what kind of "stuff" must be included to meet user needs?
- what textual content is needed? who will author it/where is it coming from?
- account for required images, audio and sound files
- schedule content expectations so you know when it will be ready to use on the site
- specify features - what must the site do (i.e., specific functionality) to meet user needs?
- consider site capabilities: nested navigation, shopping cart, forum, blog
- determine technical requirements: databases, server side scripting, javascripting, etc.
- form a development team that has the required skills
information architecture tasks & deliverables
review existing content
- content includes all required resources:
- text
- images
- video
- sound
- review current site architecture if applicable - how mant current pages, identify ROT (redundant, outdated, trivial)
- identify new content requirements
- create content inventory/outline - spreadsheet identifying all current content and any revisions required as well as new content to be created
sitemapping
- content outline will start to imply natural groupings, and categories will start to arise as natural navigation points
- a sitemap acts as a high-level outline document that suggests the overall breadth and depth of a site - can help to make decisions about:
- how to organize and structure site data to be intuitive and coherent
- what labels to apply for each topic and sub-topic
- how to devise an appropriate navigation system
- where to add courtesy and search navigation options
- a simple image search for sitemap examples
- free sitemapping tools
wireframing
- a low-fidelity method for "blocking" out the elements of a web page:
- what KIND of information will go on a given page at a particular level in your site
- where/how the information will be arranged on a given page
- where navigation will be situated, and what labels will be used
- a simple image search for wireframe examples
- free wireframing tools
- wireframe.cc
- mockflow (Google sign-in)
- figma (Google sign-in)
defining user paths
- extremely important for transactional sites (see above re: features)
- what tasks are users trying to complete? in what order?
- what tools do they need at each step?
- examples:
- bookstore checkout process
- signing up for an account
- selecting options for a travel package
- use personas and user scenarios from your profiles to describe user flow and inform your interaction design.
information architecture components
- organization systems - how we categorize the content (subject, date), which determines...
- labelling systems - how we represent the information (products, history), which is reflected in...
- navigation systems - how we browse or move through information (site wide, locally, supplemental), which are supported by...
- search systems - how we search for information (execute a query).
organization systems
- schemes:
- exact organizational schemes (well-defined, mutually exclusive):
- alphabetical (dictionary, or "white pages" if you're old)
- chronological
- geographical
- ambiguous organizational schemes (ill-defined, overlapping):
- topical (encyclopedia, or "yellow pages" if you're old)
- task-oriented (register, buy, edit)
- audience-specific (investors, publishers, employees)
- exact organizational schemes (well-defined, mutually exclusive):
- structures:
- linear - "a" follows "b"
- hypertext - nonlinear, flexible, but potentially confusing
- hierarchy - top down; breadth and depth
labeling systems
- obvious way of showing users your organization and navigation systems
- we have options when choosing our labels for navigation elements:
- main page, home, home page
- search, find, browse
- products, catalogue, shop
- help, frequently asked questions, faq
- news, what's new
- about, about us, who we are
- labels as headings - are actualy a key part of your navigation system (see below)
- ultimately, choosing labels is about helping your user understand what's available and how they can access it
navigation systems
- one of the key factors in website design
- navigation design goals:
- tell people what's on the site and how to get there - use meaningful labels!
- tell people where they are and how the pieces are related
- give people something to hold on to - make it persistent, repetitive
- give people confidence that we know what we're doing - helping them find stuff leaves a good impression
- tell people what you have on your site and how to find it
- tell people where they are and how to get back
- flavours of navigation:
- global/main navigation
- local navigation
- supplementary navigation - shortcuts
- contextual navigation - inline
- courtesy navigation
- remote navigation - a-z index, sitemap
- the design challenge is to accommodate various levels of navigation without overwhelming the content
in-class exercise
Your instructor will divide you into groups to complete the following tasks:
- Review the client brief for WidgetWerks Inc.
- Work as a group to brainstorm all the content and features you feel would be needed on the new site to meet the business objectives and needs of the user groups (note: don't organize yet!).
- Using your master content/feature list, organize and label the content as you see fit, creating a final sitemap or blueprint.
- Based on your sitemap, create a wireframe depicting the new homepage and how it would accommodate the new site features.
- You will be asked to briefly present your organizational structure in class.
Use Notely free online sticky notes (or find other tools online), or use desktop applications to create your artifacts.
assignment four
objective: Write, test, and publish a responsive website outlining your plan for your final project.