Designing a Commercial Website

1
Designing a Commercial Website
2
Creating a Successful Website Three Elements

• Web Usability
• Page, content, and site design
• Design Process
• What does it look like from customers point of
  view?
• Information Architecture and Development
• The major stage
• Project management and web design

3
Web Usability
4
Web Usability

• Always keep customer in mind
• a hierarchy of menus and pages that feels natural
  and well-structured to the user
• users experience usability first and pay later
• Common design mistakes
• Missing that the web changes the way we do
  business
• Not knowing how to manage a web design project
• Making the sites information architecture
  mirror the organizational structure
• Testing only within the organization
• Not writing for the web
• Not using an effective linking strategy

5
Wed Design is Different

• In traditional design,
• You control every pixel on the screen
• Know the system you are designing for
• Know what fonts are installed
• Know how large the screen typically will be, and
• Have the vendors style guide to tell you the
  rules
• In web design,
• You share control with users
• Pages are viewed with computers, WebTV, hand-held
  devices, cell phones, Dick Tracy watches

6
Wed Design is Different

• In traditional design,
• The designer controls where the user can go and
  when
• A traditional application is an enclosed user
  interface experience
• The user typically works with an application for
  a considerable amount of time
• On the web,
• the user controls ones navigation
• One can rapidly move among sites
• Users stay on a site one minute or less unless
  one has a reason to be there

7
Usability Features

• A web page should be dominated by content
• Work toward simplification
• Design resolution independent pages
• Use instead of pixel dimensions
• Test them with different font size
• Design for speed
• On average 10 sec download is acceptabel
• Give the user clues

8
Usability Features

• Design for Impact
• Inverted pyramid
• The top of the page should have important content
• Use ltALTgt ltHEIGHTgt and ltWIDTHgt attributes
• Avoid complex nested tables
• Design for Longevity
• Web pages should live forever
• This is one argument for using standard markup
• Nielsen recommends waiting for a year before
  using new technologies

9
Usability Features

• Design for Linking
• Structural navigation links outline the
  information architecture
• Associative links allow within page movement
• See also links access to related content (on and
  offsite)
• Links should convey information
• Avoid Click here
• Use link titles
• To the ltA HREFhttp//ecstore1/catalog/
  TITLEOur product cataloggtcataloglt/Agt!
• Tell them where they are going

10
Usability Content Design

• Writing for the web is different
• Be concise use half the text youd use in print
• Reading speed is 25 slower online
• Spell and grammar check your text then proofread
• Inverted pyramid start with the conclusion
• Encourage scanning short paragraphs, bulleted
  lists
• Use subheads to break up text
• Use colored and bolded text for emphasis
• Split up long blocks of text into separate pages
• Do this with chunking

11
Usability Content Design

• Use meaningful ltTITLEgts (64 characters or less)
• This is useful for search engines
• Dont use A, An, and The to start
• Write them to stand alone and reflect content
• Use high contrast between text and background for
  legibility
• Sans-serif fonts are more readable (especially
  when small)
• Avoid ALL CAPS - PEOPLE READ IT MORE SLOWLY
• Provide well written, clear, and simple help
  documentation

12
Usability Site Design

• Simplicity
• Studies show that users have a difficult time
  moving through complex sites
• The home page must convey essential information
• Content (who we are, what we do, and whats new)
• Navigation (heres what we have and how you get
  there)
• Search tool and help links
• Think carefully about what your users will do
  when they arrive
• This is where branding begins!

13
Usability Site Design

• Size matters
• Because of variability in displays, design for a
  600 pixel width
• Design for deep linking
• If users come in at lower levels, what branding
  content should they see?
• Design for consistency
• What is the metaphor you will carry throughout
  your site?
• Navigation Where am I? Where have I been? Where
  am I going?
• Location is relative to the web and to the site
  structure

14
Usability Site Design

• Navigation has a purpose
• To place the users location and possible
  movements relative to the sites information
  architecture
• Try to show a pages position in the hierarchy
  (breadcrumbs)
• Provide search options
• Site structure
• It should be sensible to users and reflect the
  tasks they have to accomplish on your site
• Dont simply mirror the structure of the
  organization
• Linear structure does not take advantage of the
  web
• Subsites can be appropriate for large sites

15
Design Process
16
Five Web Authoring Lies

• Your site is WYSIWYG
• Dont assume what you see is what everyone sees
• Exploiting browser quirks shows youre smart
  Capitalizing on browser quirks is a good way to
  lose half your audience
• Flashy graphics make you look good
• Speed is the 1 web problem
• Small image sizes speed dowloading
• Small graphics files equal ugly graphics
• Learn to reduce the size of your graphics files
• Reduce the number of graphics,
• Broken links are not your problem
• Users say broken links are the 2 web problem
• Regular checking prevents linkrot

17
What Users Dislike?

• Cant find what youre looking for
• How to get what you want is not obvious
• No search facility, navigation is poor, pages are
  moved around
• Poor graphic design and layout
• Pages have too much stuff on them
• Design is too dull or too excessive
• Too many bells and whistles
• Animated .gifs
• Java

18
What Users Dislike?

• Inappropriate tone
• Too much or too little jargon
• Too much or too little description
• Designer-centered
• Too much about the designer, not enough about the
  company
• Under construction
• If its not ready to be viewed, dont have it
  online
• Lack of attention to detail
• Bad or outdated information, typos, broken links,
  markup or programming errors

19
What Users Like?

• Aesthetics
• A coherent and consistent look and feel
• Site elements are well integrated
• Big ideas
• The content makes you think about ideas
  differently
• The presentation does not dominate the content
• Usability
• The site is useful for entertainment, browsing,
  research, communication
• It is easy or intuitive to use

20
What Users Like?

• Speed
• The site downloads reasonably quickly
• Findability
• You can easily get to what you want on a site
  with a large number of pages (known item search)
• The organizational scheme is sensible
• Personalization
• Customize the users browsing experience on the
  site
• More generally Support multiple audiences

21
Information Architecture and Development
22
What is Information Architecture?

• What is information architecture?
• It involves the design of organization,
  labeling, navigation, and indexing systems to
  support both browsing and searching. It plays a
  central role in determining whether users can
  easily find the information they need.
• It begins with research into mission, vision,
  content, and audience. This ... provides a
  foundation for the development of a successful
  information architecture design that supports
  long-term growth and management.
• Argus Associates. (1998). Information
  architecture defined http//argus-nc.com/design/ar
  chitecture.html

23
Information Architecture and Design

• It involves developing and communicating a
  holistic view of a web site
• It includes the overall social and technical
  structure of the site and the relationships
  among its elements
• It requires the classification of site goals and
  objectives
• IA places the web site into a larger social
  context
• How will it affect the work flow, communications
  patterns, and distribution of power in the
  organization?
• How will it appear to its users?

24
Elements of IA

• Social
• What are the mission, vision, and goals for the
  site?
• What will be the central metaphors for the site?
• How will the site grow and change over time?
• Technical
• How will the site be organized ?
• What content and functionality will the site
  contain?
• What types of navigation, labeling, and searching
  will be used?

25
Site Definition

• Define the site goals (client)
• Set up over-all concept
• Organize content information
• Determine site functionality
• Create budget and schedule
• Assign team responsibilities

Goto, K. (1999). Web Design Workflow
http//www. thunderlizard.com/tlp/tlp_pdfs/wd _got
o3.pdf
26
Site Structure

• Develop site architecture
• Map out the site
• Show lay out and functions
• Show all pages of the site with each having its
  own name
• Establish navigation and site flow
• Review and define technical needs

27
Interface Design

• Interface design Digital artist works with the
  producer and programmer to ensure that design
  elements work to web standards
• Technical engineering aspects of the site,
  including forms, databases, frames, etc. are
  developed and tested
• Publishing and marketing begin

28
Development Process
8. Maintenance and updating
1. Planning and strategy predesign analysis
7. Feedback and redesign
2. Conceptual design prototyping
3. Information organization Content development
6. Launch
4. Production Navigation systems Search
tools Labeling systems Operations
5. Testing Quality assurance and usability
29
Planning and Strategy

• Define the project write a project mission
  statement
• Objectives (what?), users (for whom?), scope
  (how?)
• Identify objectives
• These objectives should be
• Specific Measurable Attainable Realistic
  Time-limited
• What is the web site intended to accomplish?
• This requires stakeholder input
• How will you know when you have achieved them?
• Burdman, J. (1999). Collaborative Web
  Development Strategies and Best Practices for
  Web Teams

30
Questions to Ask

• Who is the client?
• What is the scope of the project?
• What are the projects goals?
• Are there multiple phases?
• Who is the audience for the product?
• What is the desired timeframe?
• What resources will be necessary to complete the
  project?

31
Client (stakeholder) Interviews

• Gather information about the clients
  organization and the vision, goals and
  expectations for the web site
• Intended audience
• How the web strategy fits into the organizational
  mission and strategy
• How the site will support the mission or strategy
• Problem Does the web force them to reconsider
  vision, mission or strategy?

32
Determine Scope

• How long will it take and how much will it cost
  to deliver the objectives?
• What are the key elements?
• Site design Navigation strategy
• Information architecture Content development
• Testing
• Determine short and long term goals for the site
• What do they want the site to do?
• What are their time frames for accomplishing
  these goals?

33
Major Phases of the Project

• Predesign
• Team building
• Needs requirements
• Prototyping and testing
• Development
• Launch
• Fine tuning
• Assessment
• Redesign

34
Building the Team

• Project roles
• Teams are specialized project manager, graphic
  designer, information architect, database
  designer, programmer, usability engineer
• The more roles there are, the more distributed
  project tasks become
• Assigning staff
• All team members must understand what's expected
  of them
• Set scope and goals for each member,
• Assign specific team tasks and responsibilities
  at throughout the development process

35
Building the Team

• Set team boundaries and procedures
• What are the benchmarks and deliverables?
• Will they work on-site or remotely?
• Will they QA their work or will someone else?
• The kickoff
• Get the project off the ground with an initial
  meeting
• Review the scope in detail
• Assemble detailed specifications
• Create preliminary project schedules
• Establish lines of communication
• Build enthusiasm and a sense of team identity

36
Building the Team

• Schedule regular meetings
• Assess progress according to benchmarks
• Seek client input
• Maintain constant communication between meetings
• Gather documentation of all phases (including
  problems and resolutions)
• Set up a project documentation library accessible
  by the team
• Save all iterations and prototypes
• Handle conflict immediately

37
Identify Audiences

• This determines content, organization,
  navigation, and design
• Market research and focus groups
• Who are they? What do they want? How do they use
  the web?
• Understand typical user tasks
• How do they use web sites?
• Specific fact-finding (Known item search)
• Extended fact-finding
• Open-ended browsing
• Exploration of availability

38
Gathering Information About Content

• What is on the wish lists of the major players?
• What types of information will form the content?
• Where is it and what form is it in?
• Who can provide content and how will they submit
  it?
• What types of content do competitors have?

39
Gathering Information About Technical Requirements

• What is the current state of networking in the
  clients organization?
• What type of hardware and software configurations
  will the client be willing to support and
  dedicate?
• Developing methods of evaluation
• What types of metrics will be used to determine
  site performance?
• How does the client define success for a web
  site?

40
Assessment Sample Metrics

• Lowering costs distribution of sales materials,
  press releases, phone calls
• Business development new leads in existing and
  new markets
• Improved customer service use of forms, email,
  other feedback, sales
• Improved public perception user feedback,
  mention in the press, links from other sites
• Site performance hits, page views, new and
  repeat users, downloads
• Usability testing

41
Beginning the Design

• High level blueprint
• The organization and labeling of major areas
• Showing major pages and groups of pages
• Clarification of relationships among these areas
• Which pages belong together
• Demonstration of functionalities
• This should be accompanied by mock ups of key
  pages
• These should be done on paper and then in a web
  prototype

42
Organizing Information

• Classify, label, and catalog content for easy
  navigation
• Deal with ambiguity and heterogeneity
• Clear language is essential, especially for major
  section headings
• Present information with varying degrees of
  granularity (resolution)
• Different types of information may be side by
  side (links to articles and journals)
• Links may lead to single pages or groups of pages
• It may also be available in varying formats

43
Organizing Information

• The planning document will
• Specify the primary and secondary audiences
• Outline the major user tasks
• How access will be provided to certain resources
• Primary access might be by a hierarchical
  thesaurus of keywords about the major features
  of the content
• Secondary access might use content descriptors
• Additional forms of access should be considered
• Detail how certain interactions will be
  encouraged
• Specify tools allowing users to engage with the
  site

44
Outline the Structure of the Site

• Explain the navigation scheme
• Show storyboards of movement through the site
• Make use of the basic principle of visual
  information seeking for browsing and searching
• Overview first,
• Zoom and filter
• Details-on-demand
• Estimate costs ( and time) for design,
  implementation, maintenance and upgrading
• Will explain how the site fits into the
  organization

45
Organizational Schemes

• What are the shared characteristics of sites
  content?
• Organization is important because it affects
  navigation
• How sections are labeled is also important
• Some schemes are exact with well defined and
  mutually exclusive groupings
• Examples Alphabetical, numeric, chronological,
  geographical
• They support known item searching

46
Organizational Schemes

• Hybrid schemes the typical way sites are
  organized
• This can be confusing if schemes are mixed
  together
• Adult audience oriented Science topical
• Community Center metaphor
• Register functional
• About Us functional
• It can support multiple audiences if they are
  kept apart

47
Organizational Structures

• What are the relationships among site elements?
• Hierarchy
• This is a top-down approach
• It uses parent-child relations and mutually
  exclusive divisions and subdivisions
• There is a tension between depth and breadth
• Depth how many levels are there
• Breadth how many pages at each level?

48
Organizational Structures

• Managing hierarchy
• Its easier to add to a broad and shallow site
  than to a narrow and deep one
• Try not to change the front page too often
• Database model
• This is a useful structure for pages containing
  similar information that can be organized into
  fields
• Developing a basic data model and controlled
  vocabulary is essential
• It allows the dynamic generation of pages based
  on user input

49
Production

• Navigation systems should support the user
• Browsers do some of the work for us (back,
  histories, bookmarks, colored links)
• Dont mess with link colors
• Dont block the URL and the status bar
• Provide a context for navigation
• How did we get here and where can we go next?
• What does this entire site look like?

50
Types of Navigation

• Hierarchical
• Vertical and lateral movement
• Random access navigation
• Ability to access the entire site from any page
• A milder form is to access all of the major
  sections from any page
• Local
• This is useful to move around subsites, or
  areas which can stand alone within the larger web
  site
• This might mean having a navigation scheme for a
  product catalog

51
Types of Navigation

• Ad Hoc
• These are added later by the subject specialists
  who understand relationships among content
  elements better than the designers
• There must be negotiation to avoid overloading
  pages with these links
• Important links can be set off in some way
• Less important links can be embedded in the text

52
Navigation Elements

• May be text based
• Here There Everywhere Everywhere else
• May be graphical
• Icons as buttons, imagemap
• If there is no accompanying text, the images have
  to be carefully done so that they convey meaning
• Text based are much easier to change
• There is controversy over placement
• Top and bottom or on the left side

53
Navigational Tools

• Pull down menus
• These take up much less screen real estate and
  add interactivity
• This involves forms, CGI, Javascript or other
  scripting
• They do not provide a good overview of the entire
  site
• Table of contents
• Presenting the first few levels of the hierarchy
  on a top page
• It should provide links to the major sections

54
Site Index

• A manually created index provides an overview of
  the sites organization
• The challenge is to figure out how deep to make
  it
• It will be easier to maintain
• Can be a graphic representation of the site
• Now there is software which will automatically
  generate a site map
• The bigger the site, the harder it is to read the
  map

55
Production Labeling Systems

• Labels represent chunks of content
• They should evoke the content for the user
• They vary in functionality, generality, and
  coverage
• Whats New lt--gt Resources for CFOs
• Labels convey a first impression to the viewer
• They should resonate in some way with other
  company language
• They should have meaning for the intended
  audiences

56
Production Labeling Systems

• Its worth the time to plan a labeling system for
  the site
• Labels should be consistent when they are part of
  a navigation system
• Use either Main, Main Page, Home, Home Page, but
  not all
• Its a good idea to use scope notes when labels
  are introduced
• Search Search the entire site
• Contact us Send email and well respond in 24
  hours
• Whats new Our current press releases, updated
  weekly
• Help A list of frequently asked questions

57
Production Labeling Systems

• Labels can also be used as indexing terms
• This allows easy classification of documents,
  even on a very large site
• Keep the level of granularity consistent when
  using labels as headings on pages
• This supports browsing
• It makes adding new pages much easier
• Labels are useful in ltMETAgt tag because they are
  picked up by search engines
• They can also be iconic, but use them carefully

58
Production Search Systems

• Use one when the sites structure seems complex
  for the intended audiences and there is
  significant content
• When its no longer simple to find specific
  information
• How do people search?
• Known item searching I know exactly what I want
• Existence searching I vaguely know, but I think
  its out there
• Exploratory I vaguely know, but Im not sure
  its there
• Comprehensive I want it all
• People search iteratively

59
Production Search Systems

• Issues to consider when developing search
  systems
• Levels of audience expertise (natural language?
  advanced features?)
• Type of information sought abstracts? full text?
• Type of information searched structured
  database? full text? format?
• Search strategies field searching (author,
  title, keyword, date), query languages, complex
  queries with operators, reusable search results,
  relevance
• Look of engine and results try to make them
  consistent with the rest of the pages

60
Production Search Systems

• Provide documentation
• What is being searched?
• What are the options for formulating search
  queries?
• What options are there for organizing the
  results?
• What can the user do if things go wrong
• Too much stuff
• Not getting anything
• Irrelevant results
• Index the right stuff on the site
• What will users be looking for?

61
Production Markup and Programming

• Detailed blueprints for the entire site
• This takes place in the development team
• It should provide sufficient detail that markup
  and content development can take place without
  you
• It requires conventions that carry meaning

Relations among pages or parts
Remote page
Components or chunks
Related pages
Groups of similar pages
Local page
62
Production Content Mapping

• This allows the development of relationships
  among the variety of content chunks
• What is the smallest chunk that can stand alone?
• Would a user want to access this chunk?
• This provides a basis for indexing
• This allows content to be placed in the
  organizational structure
• It allows chunks to be reused on multiple pages
• This is especially useful with a database driven
  site

63
Production Web Page Inventory

• This is a document which list all of the pages in
  the site
• For large sites, this can be automated
• This list contains pages created, to be created,
  to be reviewed for updating
• The content mapping and inventory provide a way
  to link content chunks with pages

Content map Chunk Page A-31 2.3,
3.5 A-32 2.4
64
Testing

• Testing is useful during initial development,
  before a redesign, and as a periodic checkup
• Where should you test?
• Their place or yours?
• How many users should you involve?
• Five 1-2-1 tests will show you what you need to
  see
• Who does the test?
• The designer or the consultant?
• The most important qualities of a successful
  tester are objectivity and a non-judgmental
  attitude
• Fleming, J. (1998). User Testing How to find out
  what users want.

65
Testing

• Targeting a specific audience
• Track down participants through customer lists,
  related organizations, discussion lists,
  conferences
• Pay them if you can afford it
• What should you ask?
• Get their name and use it
• Find out their web skill level and familiarity
• Ask other questions essential to viewing the
  results
• What should they do?
• Give them tasks, watch, and listen
• Let them browse, watch, and listen

66
Testing

• When its over (30 minutes), ask focused
  questions
• What kind of company do you think this is?
• How would you use to describe the people who own
  this site?
• What is the purpose of this site?
• What problems did you see?
• What do you suggest to resolve them?
• Look for patterns in comments and actions
• These indicate strengths and weaknesses
• Where didnt they go?

67
Further Readings

• Art and the Zen of Web Sites http//www.tlc-syste
  ms.com/webtips.shtml
• Guide To Web Style http//www.sun.com/styleguide/
  
• Information Architecture Guide
  http//argus-inc.com/iaguide/useit/subject.html
• NCSA Technology Research Group - Review of Web
  Style Guides http//www.ncsa.uiuc.edu/edu/trg/sty
  leguide/
• Style Guide for Online Hypertext
  http//www.w3.org/Provider/Style/
• The Sevloid Guide to Web Design
  http//www.sev.com.au/webzone/design.htm
• Usableweb Guide to Web usability resources
  http//www.usableweb.com/
• What Every Web Developer Should Know
  http//wdvl.internet.com/Authoring/Guide/
• Yale C/AIM Web Style Guide http//info.med.yale.e
  du/caim/manual/contents.html