Internet application design principles

CS1S52 Week 5

Design Process Overview

Internet Application Design Process
Target Audiences The use of Personas User Scenarios Flow Charts and Structure Diagrams Storyboards

Why Define Target Audiences?

Users vary according to broad range of characteristics:
demographics (age, gender), socio-economics (cultural background, reading and language skills, level of education and type of work) level of 'domain specific knowledge' (e.g. understanding of sector specific language, terms and acronyms) hobbies and interests (e.g. level of experience and interest in the Internet) location and context will affect time spent and suitability of auditory signals

Benefits of Defining the Audience

Knowledge of these characteristics are vital to design. They ensure consideration to of key aspects during system design and development, such as:
The use of an appropriate tone, themes, and mode of address The use of the appropriate language The appropriate use of technology (CSS, Flash) The incorporation of appropriate features, images, graphics The achievement of the appropriate look and feel of the web site

Examples
http://news.bbc.co.uk/ http://www.amazon.co.uk/ http://www.nasa.gov/home/index.html? skipIntro=1 http://www.streetmap.co.uk/ http://www.hitentertainment. com/bobthebuilder/

Important Design Consideration

Remember We are not designing for ourselves!
Users have specific needs and it is up to us as designers to address them. Addressing these needs will enable the design of products that are easy to use, and appeal to our intended audiences.

How not to design your website

http://www.rogerart.com/
Voted worst web site of 2006!

Design Methods and Tools

Design tools used for identifying the needs of our intended audiences include:
Personas (or User Profiles) User Scenarios User task Analysis Site Structure Diagrams Content Structure Charts Navigation (flow) Diagrams Storyboards

What is a Persona?
A persona provides a description of a fictitious person that we believe exists within our target audience or user group.

A user persona should include:

Who (age ,gender ,education) Context (when ,where ,type of computer) What (purpose ,expectations) Motivation (urgency ,desires ) Personality (timid -- aggressive, cautious -- bold) Identity (Photograph and possible nickname)

User scenarios and Personas example

Why do we use Personas and Scenarios?

Describing users is a key step in developing realistic scenarios for the design and evaluation of usable web sites Personas. The use of scenarios will influence the design of a site's navigation and the site's content.

What are user scenarios?

Scenarios are stories that clearly communicate and demonstrate the users' information seeking and task driven needs. They determine the main actions a user will perform whilst browsing a website your site should aim to be developed around these tasks. User scenarios vary in complexity according to the product.

User Scenarios and analysis example

Site structure diagrams

Site structure diagrams can be produced based on a breakdown of user tasks and goals identified during task analysis, and through examining user scenarios. E.g. an example scenario: the user needs to contact the university by email. Therefore the users task will involve the following navigation according to our current university web site, in order to achieve their goal

Home Page
Hierarchical Site structure example

Contact Us

Click on e-mail link

http://www.yendo.com/infodesign/site_structure.htm

Content Structure and Organisation

Content structure and organisation relates to the process of dividing content into logical sections that relate specifically to the users requirements - extracted from scenarios and task analysis. Each content structure diagram enables us to determine the logical content structure which includes the names and number of navigational links required. Content Structure and Organisation example
http://www.colinglentrust.org/sitemap/sitemap.html

Navigation Design
Navigation design addresses how information from user scenarios is utilised to form the basis of navigation structure diagrams. Navigation Structure Diagrams are based on task analysis, illustrating navigational links between nodes that relate specifically to users information seeking needs / goals (extracted from scenarios).
Flow Chart example
http://www.phone-place.com/fpiflowchart.htm

Task Analysis example

http://bmrc.berkeley.edu/courseware/cs160/spring01/projects/t7/v2/task_analysis.html

Navigation Resource http://www.smartwebby.com/web_site_design/website_navigation_tips.asp

http://www.cmprofessionals.org/resources/website/navigation.html

Storyboarding
Design Storyboards used to illustrate the visual design and layout of pages or nodes contained within a web site; the use of colour; and inclusion of multimedia assets. Storyboarding design decisions are based on information gathered at the requirements analysis phase, and include consideration to usability and accessibility issues. Each storyboard also serves as a tool to assist developers during implementation.

Storyboards are used to plan:

Visual design and layout, and the structure of each node. The types of interactions encountered by the user. The nature of animated sequences. Identification of the required assets for development
Storyboard examples http://www.mcli.dist.maricopa.
edu/authoring/studio/guidebook/storyboard_example.html

Design Process Outcome

At this stage we should have 4 working documents to guide us through implementation.

Design Specification
Includes details that will influence our decisions on the look and feel of the web site (visual style); including the mode of address (language- tempo), content structure and organisation; and navigation design. A description of the intended product.

Content Structure Document

Details the sites content sections that relate specifically to the users requirements (extracted via scenarios and requirements analysis). Enables us to define the logical content structure of the application. Enables us to decide on the names and number of navigational links required for our web site.

Navigation Structure Diagrams

Details the users interactions between nodes that relate specifically to users information seeking needs (extracted via scenarios). Enables us to define the navigation structure of the web site, and to identify where links are required to facilitate ease of use, and to provide good orientation.

Design Storyboards
Illustrates the visual design and layout of pages in the web site, including the use of colour and multimedia assets. Storyboarding design decisions are based on the information gathered at the requirements analysis phase. Each storyboard provides a guide for the visual layout and structure of web site templates.

Tutorial
Visit http://www.amazon.co.uk Investigate:
Target audience Social factors (international versions) A typical Persona Site Structure Navigation Design and Usage