Download ppt - ITB002 IT Professional Studies Faculties of Information Technology & Faculty of Creative Industries CRICOS No. 00213J Oksana Zelenko Communication Design,

ITB002 IT Professional Studies Faculties of Information Technology & Faculty of Creative Industries

CRICOS No. 00213J

Oksana ZelenkoOksana ZelenkoCommunication Design, Creative Industries Communication Design, Creative Industries

ITB002 Week 8/9: ITB002 Week 8/9: Second hour:Second hour:Web Site DesignWeb Site Design


CRICOS No. 00213J

Baddesign.comBaddesign.com


CRICOS No. 00213J

Recap:Recap:

Last hour’s lecture: Last hour’s lecture: Web page design and Web page design and site identitysite identity

How elements such as:How elements such as:• ColourColour• Line and formLine and form• FontFont• CompositionComposition

• LanguageLanguage

Can evoke a mood, make an impression and create meaning to Can evoke a mood, make an impression and create meaning to communicate a message or meaning to a particular audience.communicate a message or meaning to a particular audience.


CRICOS No. 00213J

This hour: This hour: Web Site design:Web Site design:

Topic 1Topic 1: concept mapping: concept mappingConcept map: groups information (extends from last week’s workshop)Concept map: groups information (extends from last week’s workshop)

Topic 2Topic 2: Information Architecture (Site structure): Information Architecture (Site structure)Site map: Site map: creates relationships between groups (content clusters) and (content clusters) and establishes hierarchies (levels)establishes hierarchies (levels)

Topic 3Topic 3: Interaction Design (Navigation Design): Interaction Design (Navigation Design)Storyboard: draws relational links between levels and pages and maps the experience or journey of the user.

Topic 4Topic 4: Interaction Design (Interface Design) : Interaction Design (Interface Design) Wayfinding helps to orientate the userWayfinding helps to orientate the user

Topic 5Topic 5: User-centered Design (Usability): User-centered Design (Usability)Accessibility is your responsibilityAccessibility is your responsibility


CRICOS No. 00213J

The way that we group and present information can also The way that we group and present information can also create meaning and lead to particular types of interaction. create meaning and lead to particular types of interaction.

Consider the layout of names in the:Consider the layout of names in the:

White pages Yellow Pages

1: 1: Concept mappingConcept mapping (organising content) (organising content)


CRICOS No. 00213J

Topic 1: Concept MappingTopic 1: Concept Mapping

http://www.visualthesaurus.com/index.jsp

Compare a dictionary or thesaurus


CRICOS No. 00213J

Compare to the Vietnam War MemorialCompare to the Vietnam War Memorial

Do you know how this information is arranged?Do you know how this information is arranged?


Design: Maya Ying LinDesign: Maya Ying Lin


CRICOS No. 00213J

Recap: Step 1: Define your goals and approach

Project Specification

• Define your goal or purpose: aim and objective

• Identify the context

• Identify the audience

• Define your approach (concept),

• Identify any constraints and limiting parameters

• Define a site identity


This analysis informs your approach to site structureThis analysis informs your approach to site structure


CRICOS No. 00213J

Step 2: Establish contentStep 2: Establish content

Brainstorm what types of content your site might require, and write down the different types of content onto individual sticky labels or file cards that can be moved around easily.

Think of both what the client (yourself) might want to include and what the users (primary and secondary) might expect to find.

Concept Mapping



CRICOS No. 00213J

((Layering and Separation)

Step 3: Structure your contentStep 3: Structure your content

Through categorisation or grouping


Richard Saul Wurman suggests we can organise things according to this acronym:

LATCH

Location | Alphabet | Time | Category | Hierarchy

Nathan Shedroff adds two more : Numbers and Randomness


CRICOS No. 00213J

Ways to organise things: Locations

Location - things are placed within geographical relationships

Information architects / Richard Wurman.

• Create relationships between Create relationships between one thing and anotherone thing and another

• Provide instruction or Provide instruction or ease of directionease of direction

• Compress complex data Compress complex data through diagrammatic through diagrammatic representation into an easily representation into an easily readable information resourcereadable information resource

Maps:



CRICOS No. 00213J

Ways to organise things: Alphabets


Alphabets -- a closed system of sense-making and not particularly useful in Web design

http://www.lovely.clara.net/ccimages/f8.gifhttp://homepages.tcp.co.uk/~nicholson/egypt/pictures/19xedfu6.jpg


CRICOS No. 00213J

Ways to organise things: Numbers


Numbers - a base 10 system is common because of implied mathematical Relationships eg. Dewey Decimal system for organising books in a library

000 Generalities 100 Philosophy & psychology 200 Religion 300 Social sciences 400 Language 500 Natural sciences & mathematics 600 Technology (Applied sciences) 700 The arts 800 Literature & rhetoric 900 Geography & history


CRICOS No. 00213J

Ways to organise things: Time


Time sequencing via hours etc., or via seasons, generational concepts

Bhaskaran, Lakshmi. Size matters : effective graphic design for large amounts of information / Lakshmi Bhaskaran


CRICOS No. 00213J

The Yellow Pages Career Library used hour by hour photographic timelines to show A Day in The Life of A Carpenter.

Wurman, Richard Saul. Information Architects p.26

Dividing a subject into understandable chronological parts can conquer it’s complexity.

Topic 1: Concept MappingConcept Mapping

or via processes and production milestones.


CRICOS No. 00213J

Categories - “chunking” or grouping of data with similar attributesdefines the categories

Redrawn from Yumi takahashi and Ikuyo Shibukawa, Colour Coordination (Tokyo, 1985)Tufte, E. Envisioning Information p.33

Ways to organise things: Categories


Informational texts in works of fiction and none fiction: A Table of Contents or Chapters list present a map of the “narrative” by directing the reader to an exact place/page number in the text

Different to a Newspaper:Which categorises according to importance:The front page is deemed the space where itemsconsidered particularly newsworthy are placed. As you move through the paper, items of lesser import are situated deeper within.



CRICOS No. 00213J

Wurman, R., (1997) Information Architects, New York: Graphis. p.30

Categories


Can be Can be applied to Web applied to Web designdesign


CRICOS No. 00213J


Heirachy - arrangement of data in terms of scale or value - eg. largest to the smallest - the densest to the least dense - the “greenest” to the lightest “green”

Ways to organise things: Hierarchy

The designer defines the hierarchy and in doing so influences the audience’sperception of and inter- relationships between information elements


CRICOS No. 00213J

Metaphor or Analogy: Advanced Organisations- a strategy to organise information or a mode of presentation?

Ways to organise things: Metaphor

Bookmarks,

scissors,

the Web etc



CRICOS No. 00213J

The Virtual Gallery




CRICOS No. 00213J




CRICOS No. 00213J




CRICOS No. 00213J




CRICOS No. 00213J

Categories - “chunking” or grouping of data with similar attributesdefines the categories

You are most likely to use:



CRICOS No. 00213J

Energex site mapEnergex site map

Remember: Remember:

The way that we group and The way that we group and

present informationpresent information

creates meaningcreates meaning


Hierarchy - arrangement of data in terms of scale or value - eg. largest to the smallest - the densest to the least dense

Combined with:


CRICOS No. 00213J

• Establish multiple possible relationships• Change those relationships• Combine and separate groups• Create a hierarchy• Emphasize important content• De-emphasize less important content

Grouping content on your sticky labels or cards Grouping content on your sticky labels or cards allows you to create movable categories allows you to create movable categories



CRICOS No. 00213J

Experience in Experience in Web developmentWeb development

Web design project 1Web design project 1Web design project 2Web design project 2

Experience in Experience in Database designDatabase design project 1project 1project 2project 2


Project leadershipProject leadership

Coffee shop managerCoffee shop manager

School prefectSchool prefect

Web project leaderWeb project leader

Education

ITB116ITB117

Referees

A Frd BlogsB Joanne BarrC Morris Minor

Eg: ContentEg: Content


CRICOS No. 00213J



Education

ITB116ITB117


Coffee shop manager









etcetc

Training in teamworkand l;leadership

etcetc

Combining and splitting contentCombining and splitting content


CRICOS No. 00213J




Education

ITB116ITB117


Coffee shop manager









etcetc

Training in teamworkand l;leadership

etcetc

Sticky labels begin to stand in Sticky labels begin to stand in for pages with categories and for pages with categories and associations emergingassociations emerging


CRICOS No. 00213J

Topic 2: Information ArchitectureTopic 2: Information Architecture(Site structure - site map)(Site structure - site map)

Site maps:Site maps: • create relationships between groups (content clusters) (content clusters) • and establish hierarchies (levels)and establish hierarchies (levels)

The design of your of site map should be dictated by both the content and the best (most logical, clear comfortable and enabled) experience for the user.

It is the structure that best facilitates the goals of your site


CRICOS No. 00213J

Linear structure:

A linear structure guides the user or a directed, pre-determined path.

Reference: Sklar, Joel. (2003). ‘Reference: Sklar, Joel. (2003). ‘Planning the Site’Planning the Site’, , Principles of web designPrinciples of web design, Boston, Mass: Thomson, pp.63-84. (on the CMD), Boston, Mass: Thomson, pp.63-84. (on the CMD)

HOMEHOME TopicTopic TopicTopic TopicTopicTopicTopic

Sub-Sub-

TopicTopic

Topic 2: Information Architecture (Site structure)Topic 2: Information Architecture (Site structure)

Possible structures:


CRICOS No. 00213J

Tutorial structure :

Built upon the linear structure, the tutorial structure allows initial choice from an index, then linear paths (and return to index).

Home Home

SiteSite

MapMap

Table Table

OfOf

ContentsContents

IndexIndex

TopicTopic TopicTopic TopicTopic

TuteTute TuteTute TuteTute

TuteTute TuteTute TuteTute

ReviewReview ReviewReview ReviewReview

Table of contents,Table of contents,

Index and site mapIndex and site map

link to and from all link to and from all pagespages



CRICOS No. 00213J

Hierarchical structure:

Perhaps the most common site structure, a hierarchical structure combines multi-pathways with linearity.

SiteSite

MapMap

contentcontent

sectionsection sectionsectionsectionsection

HomeHome

contentcontent

contentcontent

contentcontent

contentcontent

contentcontent contentcontentsectionsection sectionsection



CRICOS No. 00213J

The web is a rhizome:

not a tree

a strawberry plant


CRICOS No. 00213J

Cluster structure :

Each topic or type of content is clustered into a web structure, •each page within each cluster is inter-connected.

SiteSite

MapMapHomeHome

sectionsection sectionsection

contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent

contentcontentcontentcontent



CRICOS No. 00213J

Web structure:

A non-linear, Web style structure (also knows as the lotus flower structure) allows more fluidity of movement and multi-directional choice. It needs greater attention to navigation and orientation cues. It can repeat from each secondary page to create a deeper structure.

HomeHome

BecomesBecomes

new hubnew hub

TopicTopicBecomesBecomes

new hubnew hub

TopicTopic


TopicTopic

TopicTopic

TopicTopic


CRICOS No. 00213J

Catalogue structure :

Facilitates browsing as the user is channeled towards the checkout

HomeHome

IndexIndexSearch Search

PagePage

ItemsItems ItemsItems ItemsItems ItemsItems

ItemsItems ItemsItems ItemsItems ItemsItems

ShoppingShopping

BasketBasketCheckoutCheckout ExitExit



CRICOS No. 00213J

Topic 3: Interaction Design Topic 3: Interaction Design (Navigation)(Navigation)

StoryboardStoryboard

The term comes from the film industry: a story board helps map out The term comes from the film industry: a story board helps map out and shows the inter-relationships between scenesand shows the inter-relationships between scenes


CRICOS No. 00213J

Story Board for a Web site:

• A storyboard describes the user’s interaction with the A storyboard describes the user’s interaction with the sitesite

• Unlike a film it is non-linear but multi-directionalUnlike a film it is non-linear but multi-directional

• It illustrates all of the possible routes to travel between It illustrates all of the possible routes to travel between pages in the sitepages in the site

• Pathways may be multiple - you describe these many Pathways may be multiple - you describe these many possible ‘stories’ in the storyboardpossible ‘stories’ in the storyboard

Topic 3: Interaction Design (Navigation Design)Topic 3: Interaction Design (Navigation Design)


CRICOS No. 00213J

3 possibilities of navigational paths:

1) level to level (vertical) 1) level to level (vertical)

Information Group A

InformationGroup B

InformationGroup C

Home

Describes Relationship

With A


With B


With C

artifacts info info artifacts info artifacts info



CRICOS No. 00213J


2) same-level (horizontal) 2) same-level (horizontal)

Information Group A

InformationGroup B

InformationGroup C

Home


With A


With B


With C



CRICOS No. 00213J

3) inter-level (diagonal) 3) inter-level (diagonal)

Information Group A

InformationGroup B

InformationGroup C

Home


With A


With B


With C



* Many students don’t do this: with dire consequences* * Many students don’t do this: with dire consequences*


CRICOS No. 00213J

• Where am I?Where am I?• Where can I go?Where can I go?• How do I get to where I want to go?How do I get to where I want to go?• Have I been here before?Have I been here before?• How can I get back to where I was?How can I get back to where I was?

***** You must provide orientation ********** You must provide orientation *****

What the user wants to know:What the user wants to know:

Topic 4: Interaction Design (interface)Topic 4: Interaction Design (interface)

Wayfinding and orientationWayfinding and orientation

linkslinks

handleshandles


CRICOS No. 00213J

Principles:

So that the user knows they are still within your site:So that the user knows they are still within your site:

1. Use page titles1. Use page titles

2. Maintain site consistency • Use persistent site identifiers (e.g. logo)Use persistent site identifiers (e.g. logo)• Maintain site identity (colours, language etc)Maintain site identity (colours, language etc)• Use templates to provide consistency and continuity (one Use templates to provide consistency and continuity (one

for each level)for each level)• Be consistent with navigation - style, placement, Be consistent with navigation - style, placement,

grouping, wordinggrouping, wording

Topic 4: Interaction Design (Topic 4: Interaction Design (Interface): ): Wayfinding and orientation

•Where am I?Where am I?

(to help you to achieve these answers for the user)(to help you to achieve these answers for the user)

ITB116 Professional Studies 1Faculty of Information TechnologyFaculty of Creative Industries

Topic 4: Interaction Design (Interface) Topic 4: Interaction Design (Interface) Wayfinding and orientation

• Where can I go?Where can I go?• How do I get to where I want to go?How do I get to where I want to go?

Principles:

• Navigation must be clear, consistent and easy to access.

• Use multiple types of navigational devices. Some people find text clues easier, some look for visual clues, some always use a universal navigation bar.

• Always include universal navigation as a fail safe


CRICOS No. 00213J

1. Include 3 types of Navigation 1. Include 3 types of Navigation on all levels::(because different people have different preferences for visual and

textual clues)

• Menu• Universal navigation bar• Breadcrumb trail• Highlighted text• Graphical iconsGraphical icons• Search functionSearch function

PrinciplesPrinciples


ITB116 Professional Studies 1Faculty of Information TechnologyFaculty of Creative Industries

Menu

Bar

Universal Navigation Bar

Highlighted text

VisualIcons

Orientation: navigationTopic 4: Interaction Design (Interface) Topic 4: Interaction Design (Interface) Wayfinding and orientation


CRICOS No. 00213J

Links between maps and web design:

• Data is categorised through similarity

• Data is presented by grouping and

• Strategies of size, colour, consistency, layout are applied

• Grouping of equal importance can be easily distinguished

Navigation : OrientationNavigation : OrientationMapping:Mapping:



CRICOS No. 00213J

Other Principles:

Hyperlinking:

• Develop a hierarchy of menus and keep Develop a hierarchy of menus and keep the user moving forwardthe user moving forward

• Minimize the number of clicks to access Minimize the number of clicks to access information or to get to desired contentinformation or to get to desired content

• Always link homeAlways link home


OrientationOrientation


CRICOS No. 00213J

Compare these sites against these principles:Compare these sites against these principles:

• http://www.bmw.com/http://www.bmw.com/• http://www.ford.com/http://www.ford.com/


Checklist:•Site consistency (colours, language)•Persistent site identity, titles and branding)•Logical categories•Multiple navigation devices•Minimum clicks•Consistent navigation placement•Hierarchy of menus•Always link home


CRICOS No. 00213J

5: User-centered Design / Usability5: User-centered Design / Usability

References:References:Curt Cloninger, Usability Experts are From Mars, Curt Cloninger, Usability Experts are From Mars, Graphic Designers are From VenusGraphic Designers are From Venus

George Olsen, Failure to Communicate, 30 March George Olsen, Failure to Communicate, 30 March 2001 2001

Mark Bernstein, Beyond Usability and Design: The Mark Bernstein, Beyond Usability and Design: The Narrative Web, 20 April 2001Narrative Web, 20 April 2001


CRICOS No. 00213J

Usability Definition:Usability Definition:• Usability is the extent to which a site can be used Usability is the extent to which a site can be used

by a specified group of users to achieve specified by a specified group of users to achieve specified goals with effectiveness, efficiency, and goals with effectiveness, efficiency, and satisfaction in a specified context of use.satisfaction in a specified context of use.

• 2 different terms2 different termsuser-centered design addresses the entire experience of the useruser-centered design addresses the entire experience of the user

usability is action drivenusability is action driven

(understand the users needs and wants - design for them)(understand the users needs and wants - design for them)

Topic 5: User-centered Design / UsabilityTopic 5: User-centered Design / Usability


CRICOS No. 00213J

User Testing:User Testing:• casual observationcasual observation• surveys & interviewssurveys & interviews• focus groupsfocus groups• lab testinglab testing• evaluationsevaluations• referencesreferences

• Elizabeth McLachlan & Leanne Waldal, Ready, Elizabeth McLachlan & Leanne Waldal, Ready, Set, Go: Usability TestingSet, Go: Usability Testing

• Jared Braiterman, Ph.D., Start Now: Develop with Jared Braiterman, Ph.D., Start Now: Develop with UsersUsers



CRICOS No. 00213J

Web Accessibility: DefinitionWeb Accessibility: Definition

• also called Barrier Free Design, Equal Access or also called Barrier Free Design, Equal Access or Universal Access Universal Access

• "The power of the Web is in its universality. Access by "The power of the Web is in its universality. Access by everyone regardless of disability is an essential everyone regardless of disability is an essential aspect." -- Tim Berners-Lee, W3C Director and aspect." -- Tim Berners-Lee, W3C Director and inventor of the W W Winventor of the W W W

• W3C Web Accessibility Initiative (WAI) pursues W3C Web Accessibility Initiative (WAI) pursues accessibility of the Web through five primary areas of accessibility of the Web through five primary areas of work: technology, guidelines, tools, education and work: technology, guidelines, tools, education and outreach, and research and development.outreach, and research and development.



CRICOS No. 00213J


Why?

• legallegal• good business (10% to 20% of the population in good business (10% to 20% of the population in

most countries has disabilities - not all of those most countries has disabilities - not all of those disabilities affect access to the Web)disabilities affect access to the Web)

• ethical (definition: being in accordance with the ethical (definition: being in accordance with the accepted principles of right and wrong that govern accepted principles of right and wrong that govern the conduct of a profession)the conduct of a profession)

• better site for everyonebetter site for everyone


CRICOS No. 00213J

Accessibility and Internationalisation

Think beyond the apparent language Think beyond the apparent language requirements:requirements:

Colour and line to create meaning Colour and line to create meaning

Symbols & iconographySymbols & iconography



CRICOS No. 00213J

Disabilities that may affect Internet usage:Disabilities that may affect Internet usage:

• Visual (low vision, blindness & colour blindness)Visual (low vision, blindness & colour blindness)• Hearing (deaf & hard of hearing)Hearing (deaf & hard of hearing)• Speech Speech • Physical (motor skills & mobility)Physical (motor skills & mobility)• Cognitive (dyslexia, dyscalculia & auditory perception)Cognitive (dyslexia, dyscalculia & auditory perception)• Neurological (seizure)Neurological (seizure)

Other Issues:Other Issues:• low bandwidth & older technologylow bandwidth & older technology• new technologies...new technologies...



CRICOS No. 00213J

Australian GuidelinesAustralian Guidelines

Equal Access is Required by Law Equal Access is Required by Law • The Australian Human Rights and Equal Opportunity The Australian Human Rights and Equal Opportunity

Commission (HREOC) Commission (HREOC)

• World Wide Web Access: Disability Discrimination World Wide Web Access: Disability Discrimination Act Advisory Notes, Version 3.2, August 2002Act Advisory Notes, Version 3.2, August 2002

• What Limits Are There on Obligations to Comply With What Limits Are There on Obligations to Comply With

Access Requirements? - unjustifiable hardshipAccess Requirements? - unjustifiable hardship



CRICOS No. 00213J

Web Accessibility - Case Study

The Sydney Olympics Web site (Maguire v SOCOG) The Sydney Olympics Web site (Maguire v SOCOG)

Decision in Maguire v SOCOG : $20000 damages Decision in Maguire v SOCOG : $20000 damages ordered under Australia's Disability Discrimination Act ordered under Australia's Disability Discrimination Act for site inaccessibilityfor site inaccessibility

HREOCHREOC - World Wide Web accessibility - World Wide Web accessibility

NUblogNUblog - Reader’s guide to Sydney Olympics - Reader’s guide to Sydney Olympics accessibility complaintaccessibility complaint



CRICOS No. 00213J

Web Accessibility - Simulators

Vischeck simulates colorblind visionVischeck simulates colorblind visionScreen Reader SimulationScreen Reader SimulationLow Vision SimulationLow Vision Simulation



CRICOS No. 00213J

Web Accessibility - Validators

Macromedia Dreamweaver MX -Macromedia Dreamweaver MX -

Look under the "Help" menu, select "Using Look under the "Help" menu, select "Using Dreamweaver". When the window comes up Dreamweaver". When the window comes up type in "accessibility" into the index keyword. type in "accessibility" into the index keyword.



CRICOS No. 00213J

Readings:

• Thomas A. Powell (2002) ‘Site Types and Thomas A. Powell (2002) ‘Site Types and Architecture’, Architecture’, Web Design: The Complete ReferenceWeb Design: The Complete Reference, , Second Edition, Berkeley, CA: McGraw-Hill/Osborne Second Edition, Berkeley, CA: McGraw-Hill/Osborne pp153-186pp153-186

• Sklar, Joel. (2003). ‘Sklar, Joel. (2003). ‘Planning the Site’Planning the Site’, , Principles Principles of web designof web design, Boston, Mass: Thomson, pp.63-, Boston, Mass: Thomson, pp.63-84. (on the CMD)84. (on the CMD)