7/31/2019 Internet Application Design Principles

1/21

Internet application designprinciples

CS1S52

Week 5

7/31/2019 Internet Application Design Principles

2/21

Internet Application Design Process

Design Process Overview

Target Audiences The use of Personas

User Scenarios Flow Charts and Structure Diagrams Storyboards

7/31/2019 Internet Application Design Principles

3/21

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

7/31/2019 Internet Application Design Principles

4/21

Benefits of Defining the Audience

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

Knowledge of these characteristics are vital to design. They

ensure consideration to of key aspects during system designand development, such as:

7/31/2019 Internet Application Design Principles

5/21

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/

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

7/31/2019 Internet Application Design Principles

6/21

Users have specific needs and it is up to us as designers toaddress them.

Addressing these needs will enable the design of products

that are easy to use, and appeal to our intended audiences.

RememberWe are not designing for ourselves!

Important Design Consideration

7/31/2019 Internet Application Design Principles

7/21

How not to design your website

http://www.rogerart.com/

Voted worst web site of 2006!

http://www.rogerart.com/

7/31/2019 Internet Application Design Principles

8/21

Design Methods and Tools

Personas (or User Profiles) User Scenarios User task Analysis Site Structure Diagrams Content Structure Charts Navigation (flow) Diagrams

Storyboards

Design tools used for identifying the needs of our intendedaudiences include:

7/31/2019 Internet Application Design Principles

9/21

What is a Persona?

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

A persona provides a description of a fictitious person that we believeexists within our target audience or user group.

http://bobulate.com/documents/scenarios.pdfhttp://bobulate.com/documents/scenarios.pdf

7/31/2019 Internet Application Design Principles

10/21

Why do we use Personas and Scenarios?

Describing users is a key step in developing realisticscenarios for the design and evaluation of usable websites Personas.

The use of scenarios will influence the design of a site'snavigation and the site's content.

7/31/2019 Internet Application Design Principles

11/21

What are user scenarios?

Scenarios are stories that clearly communicate and demonstrate theusers' 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

http://userwww.sfsu.edu/~heitman/html/id/andel/pdf/a_two_user_scenarios.pdf

7/31/2019 Internet Application Design Principles

12/21

Site structure diagrams

Site structure diagrams can be produced based on a breakdownof user tasks and goals identified during task analysis, andthrough examining user scenarios.

E.g. an example scenario: the user needs to contact the

university by email. Therefore the users task will involve thefollowing navigation according to our current university web site,in order to achieve their goal

HomePage

ContactUs

Click on e-mail link

Hierarchical Site structure example

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

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

7/31/2019 Internet Application Design Principles

13/21

Content Structure and Organisation

Content structure and organisation relates to the processof dividing content into logical sections that relatespecifically to the users requirements - extracted fromscenarios and task analysis.

Each content structure diagram enables us to determinethe logical content structure which includes the namesand number of navigational links required.

Content Structure and Organisation example http://www.colinglentrust.org/sitemap/sitemap.html

http://www.comp.glam.ac.uk/blackboardAT/CS/CS1S52/CourseMaterial/Referral%20week_july6_2004.ppthttp://www.comp.glam.ac.uk/blackboardAT/CS/CS1S52/CourseMaterial/Referral%20week_july6_2004.ppt

7/31/2019 Internet Application Design Principles

14/21

Navigation Design

Navigation design addresses how information from user scenarios is utilised toform the basis of navigation structure diagrams.

Navigation Structure Diagrams are based on task analysis, illustratingnavigational links between nodes that relate specifically to users informationseeking 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

http://www.smartwebby.com/web_site_design/website_navigation_tips.asphttp://www.phone-place.com/fpiflowchart.htmhttp://www.smartwebby.com/web_site_design/website_navigation_tips.asphttp://www.public.iastate.edu/~slovakia/download/Assignment1.pdfhttp://www.phone-place.com/fpiflowchart.htmhttp://www.colinglentrust.org/sitemap/sitemap.html

7/31/2019 Internet Application Design Principles

15/21

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 ofmultimedia assets.

Storyboarding design decisions are based on information gathered at therequirements analysis phase, and include consideration to usability andaccessibility issues.

Each storyboard also serves as a tool to assist developers duringimplementation.

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 exampleshttp://www.mcli.dist.maricopa.

edu/authoring/studio/guidebook/storyboard_example.html

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

7/31/2019 Internet Application Design Principles

16/21

Design Process Outcome

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

7/31/2019 Internet Application Design Principles

17/21

Design Specification

Includes details that will influence our decisions on thelook and feel of the web site (visual style); including the

mode of address (language- tempo), content structureand organisation; and navigation design. A descriptionof the intended product.

7/31/2019 Internet Application Design Principles

18/21

Content Structure Document

Details the sites content sections that relatespecifically to the users requirements (extracted viascenarios and requirements analysis).

Enables us to define the logical content structure ofthe application.

Enables us to decide on the names and number ofnavigational links required for our web site.

7/31/2019 Internet Application Design Principles

19/21

Navigation Structure Diagrams

Details the users interactions between nodesthat relate specifically to users informationseeking needs (extracted via scenarios).

Enables us to define the navigation structure ofthe web site, and to identify where links arerequired to facilitate ease of use, and to providegood orientation.

7/31/2019 Internet Application Design Principles

20/21

Design Storyboards

Illustrates the visual design and layout of pages inthe web site, including the use of colour andmultimedia assets.

Storyboarding design decisions are based on theinformation gathered at the requirements analysisphase.

Each storyboard provides a guide for the visual

layout and structure of web site templates.

7/31/2019 Internet Application Design Principles

21/21

Tutorial

Visit http://www.amazon.co.uk Investigate:

Target audience

Social factors (international versions) A typical Persona Site Structure Navigation Design and Usage

http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/storyboard_example.html