Design Principle

1
Design Principle

• 2006. 04.11
• ? ? ?
• iceboy98_at_hufs.ac.kr

2
Agenda

• Site Structure
• The Web Design Dilemma
• Web Design Issues
• Guideline

3
Site Structure

• Totally connected
• Hierarchical
• Sequential
• Hybrid

4
Totally connected

• Every page has a link to every other page.
• Even for a small site, this structure requires a
  lot of links and is hard to make sense of.
• May be appropriate for a small site where
  visitors may want to look at some or all of the
  pages in any order
• Provide a standard navigation bar (navbar) on
  each page, containing links to each of the others
• Indicate current page ("You are here")
• http//www.edgescans.com/

5
Hierarchical

• Most popular organization for larger sites
• Home page contains pointers to a subset of other
  pages in the site
• Each page directly accessible from home page can
  be considered the home page of its own sub-site
• May contain links to home pages of sub-sub-sites,
  and so on
• Sub-sites devoted to sub-topics of main site

6
Hierarchical Navigation

• Essential structure is hierarchical, but there
  may be additional links (e.g. to each 2nd level
  page from every page)
• Use main navibar to access major sub-sites plus
• 2nd level of navibar within each sub-site
• Hierarchical drop-down menus
• Breadcrumbs(a sequence of links) popular way of
  showing current location in hierarchy
• http//www.gmarket.co.kr/challenge/neo_goods/goods
  .asp?goodscode105301912pos_shop_cdSHpos_class_
  cd111111111pos_class_kindTkeyword_orderBEC6
  C0CCB3AABAF1

7
Sequential

• May be appropriate when pages naturally form a
  linear sequence
• Small online gallery is an example.
• The site is to display a series of images.
• Results pages from a search engine
• Entries in a Weblog
• Usual navigation consists of Next and Previous
  buttons, often augmented with links to every page
  in (short) sequence
• http//www.raysoda.com/

8
Hybrid

• Many-medium - to large-sized Web sites do not
  fall neatly into any of the three categories just
  described, but they can be seen as being composed
  of sub-sites which do.
• One or two levels of hierarchy
• Totally linked or sequence, or both.
• Example
• http//www.sec.co.kr/
• http//www.soolsool.co.kr/
• http//www.soju.co.kr/

9
Complementary Navigation Structure

• Site maps are helpful to users who want to reach
  a particular page directly without following a
  series of links through a structure.
• Complex sites provide a search facility, which
  enables users to find pages of interest and go
  directly to them.

10
Time-Based Structures

• Traditional time-based media essentially linear
• Digital media, linear order can be altered by
  scripts and in response to input from the user
• If script controls playback by computation, but
  without accepting input (e.g. counts frames),
  structure is deterministic
• To accept user input, there must be some controls
  to accept input
• May also exhibit parallelism

11
Loops

• Simple loop script attached to final frame sends
  playback head back to first frame
• Introduction plus loop script on final frame
  sends playback head to some earlier frame (not
  first)
• Counted loops Script counts number of times
  round the loop, does something different after a
  certain number of loops (e.g. stop)

12
Branching

• Common case set of selections on a menu
• Menu is a single stopped frame with buttons for
  each menu selection
• Movie is divided into sections, each of which
  jumps back to the menu frame at the end
• Script attached to each button causes a jump to
  the corresponding section when pressed
• General branching structures built by allowing
  users to choose from set of alternatives for next
  part of movie to play next (e.g. interactive
  narrative)

13
Parallelism

• Flash movie clips are self-contained movies
  within a movie that can play back in parallel
• Movie clips can be controlled by scripting
• Stopped, started, sent to a particular frame,
• Permits essentially infinite variations on
  playback of a finite collection of elements
• Can respond to user input
• Interactive animation etc

14
The Web Design Dilemma

• Heterogeneity of the Internet and its users
• Pages may be viewed on any machine connected to
  the Internet by any connection
• Must look good at any resolution using any
  browser, no matter how configured, under any OS
• Download times may differ by factor up to 40
• Public global network, no idea of identity of
  visitors
• Different cultural and educational backgrounds,
  levels of skills possibly physical or cognitive
  disabilities

15
Example
A web page based on a printed design.
Displayed on a small monitor
With substituted fonts and altered link color
With font sizes increased
16
HTML Display

• Original design of HTML and browsers attempted to
  deal with heterogeneous environment
• Text may reflow to accommodate to available
  window size
• Page elements could not be positioned absolutely
• Fonts could not be specified on page
• http//natazo.wo.to/
• http//www.nayoung.com/
• Relative type sizes
• CSS restores some control to designers, but user
  retains ultimate control

17
Page Design Pitfalls

• Traditional print-based design ideas may not work
  on the Web
• Small screen may need scrollbars with parts of a
  page hidden
• Fonts may be substituted
• User may change type size
• Brower may not support CSS properly or at all
• Some people use a text-only browser

18
Inadequate Responses

• Fix design may make matters worse
• Turn text into GIF to preserve fonts and layout
  slows down page loading, leaves users with images
  disabled with nothing
• Reduce all design to level of text-only browser
• Page will not communicate as effectively as it
  could with proper design
• Design for one particular configuration
• Great diversity of systems and configurations
• Foolish to turn away visitors who don't conform

19
Graceful Transformation

• Accept that a Web page may appear differently to
  different users
• Ensure that page remains readable and navigable
  and preferably attractive under all
  circumstances

20
Barriers to Access

• Some visitors to any Web site may
• Be unable to see, or have impaired vision or
  defective colour vision
• Be unable to read or understand what they read
  very easily
• Be unable to use a mouse or keyboard, owing to
  injury or major disability
• Be unable to hear
• They may have to rely on assistive technology

21
Accessibility

• Pages must transform gracefully into a form that
  can be rendered by assistive technology
• e.g. text-only for screen readers
• In many countries legislation exists requiring
  certain classes of Web site to be accessible in
  this sense
• Requirements based on the W3C's Web Accessibility
  Initiative (WAI) guidelines

22
Textual Equivalents

• Should supply text that can stand in for all
  non-textual elements of a page.
• img and area elements use alt attribute to
  specify a brief decription of the image/hotspot
  displayed instead of the image in text-only
  browsers, read by screen readers.
• If long description is needed, use longdesc to
  point to text-only document
• Equivalents are alternatives, not replacements.

23
Structural Markup

• Separating structure and content from appearance
  (e.g. using CSS) allows page to be presented in
  form appropriate to user's needs.
• e.g. if you use h1, h2 for headers, can use a
  stylesheet to format them for sighted users, an
  audio stylesheet to add stress for screen
  readers, or software can extract headings to
  generate an outline.
• Using visual markup to identify structure (e.g.
  headings as p elements with special font
  attributes) prevents this.

24
CSS Positioning

• By using absolutely positioned div elements, can
  create arbitrary layouts (e.g. multi-column,
  call-outs, )
• If divs appear in logical order in HTML document,
  user agents that ignore CSS will 'see' text in
  its correct order
• Beware Web authoring software that may choose its
  own order for adding div elements to HTML
• Using tables to create layouts may mislead screen
  readers (e.g. read straight across two columns)

25
Structure and Navigation

• To help people with cognitive disabilities, use
  headings and sub-heading, bulleted and numbered
  lists use one paragraph per idea.
• Provide navigational overview of site to help
  orient people who easily become confused and to
  allow assistive technology to isolate
  navigational elements.
• Make link text meaningful, even in isolation.
• Never use click here links.

26
Colour

• Roughly 5 of male population unable to
  distinguish between certain colours (usually red
  and green) very small number of people cannot
  see colours at all.
• Old computers, some PDAs only have black and
  white displays.
• Cannot rely on colour alone to convey
  information.
• e.g. if you use colour to identify links,
  supplement it with some other styling.
• Can distinguish between confusable colours using
  brightness.

27
Animation

• Rapidly flashing elements can trigger epileptic
  attacks, so avoid blinking text.
• Movement may be an unwelcome distraction, so
  always provide a way of turning off animated
  effects
• Animated GIFs, JavaScript animation this can
  usually be done in the browser
• Flash add controls to movie to stop or skip it
• Users with cognitive difficulties can become
  confused if windows open spontaneously, so don't
  use pop-ups

28
Web Design Issues

• Correctness
• Content
• Usability

29
Correctness

• Things have to work.
• Static HTML errors
• Validate HTML
• But beware of browser bugs
• Example
• http//www.yeh1003.lil.to/
• Image distortion
• Client-side script errors
• Scripting languages such as JavaScript do not
  provide much linguistic support for ensuring the
  correctness of scripts.
• Cannot be checked at compile-time
• Scripts can only be detected when the script is
  run.
• Server-side programming errors
• Logic fails, the whole application cannot perform
  its function.
• Perl and PHP.
• Must be scrupulously checked and tested.

30
Content

• Most important thing about a Web site is its
  content.
• Most beautifully designed accessible site will
  attract no visitors if the content is of no
  interest to anybody.
• Need to frequently update.
• http//www.mlb.com/
• Easy readable page.
• Compelling content can overcome poor design.
• Barely design , simply text etc.
• http//weblib.hufs.ac.kr/
• Good design practice can make compelling content
  more readable, navigable, welcoming.

31
Usability

• How easy is it for visitors to find information
  they are looking for, or use services offered
  through the site?
• Much of the research conducted into usability
  suffers from poor methodology.
• Small and unrepresentative samples relative to
  population of Web users.
• Data used to support the conclusion are flimsy.
• Emphasis on goal-oriented experimentation .
• For effective design, you need to understand not
  only the principles behind the technology, but
  also the principles of effective communication.

32
Guidelines

• Not cast-iron rules.
• Mostly common sense and courtesy.
• Treat as check list If not followed, know why
  not.
• Put the user first.
• The users who look at the site are the people who
  should be considered first.
• Put the user in control.
• Don't provide too much choice.
• The user should be in control, but not forced to
  make unnecessary decisions.
• Don't make assumptions about users' behaviour.

33
Guidelines

• Use technology judiciously.
• Understand your site's context.
• Keep up with change.
• Don't neglect aesthetics.
• Know your limitations.