of 21
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.pdf7/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.pdf7/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.htm7/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.ppt7/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.html7/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.html7/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