Design Interface

1
Design Interface
2
Introduction

• The capacity for perception depends on the
  amount, the kind and the availability of past
  experiences.... We see familiar things more
  clearly than we see objects about which we have
  no stock of memories. Aldous Huxley
• The graphic user interface (GUI) of a computer
  system comprises the interaction metaphors,
  images, and concepts used to convey function and
  meaning on the computer screen

3
Web page design versus conventional document
design

• Concepts about structuring information today stem
  largely from the organization of printed books
  and periodicals and the library indexing and
  catalog systems that developed around printed
  information
• Book features
• Page number, index, table of contents, footnotes,
  etc
• Web documents are undergoing a similar evolution
  and standardization

4
Make your web pages freestanding

• World Wide Web pages differ from books and other
  documents in one crucial respect hypertext links
  allow users to access a single Web page with no
  preamble
• Web pages need to be more independent than pages
  in a book. For example, the headers and footers
  of Web pages should be more informative and
  elaborate than those on printed pages
• the best design strategy is to apply a few
  fundamental document design principles
  consistently in every Web page you create

5
Basic Design Interface

• User Centered Design (UCD)
• Accessibility

6
User Centered Design (UCD)

• Graphic user interfaces were designed to give
  people control over their personal computers
• research on the needs and demographics of the
  target audience is crucial
• Testing your designs and getting feedback from a
  variety of users is the best way to see whether
  your design ideas are giving them what they want
  from your site

7
User Centered Design (UCD)

• Clear navigation aids
• No dead-end pages
• Direct access
• Bandwidth and interaction
• Simplicity and consistency
• Design integrity and stability
• Feedback and dialog

8
UCD Clear Navigation Aids

• Most user interactions with Web pages involve
  navigating hypertext links between documents. The
  main interface problem in Web sites is the lack
  of a sense of where you are within the local
  organization of information
• Clear, consistent icons, graphic identity
  schemes, and graphic or text-based overview and
  summary screens can give the user confidence that
  they can find what they are looking for without
  wasting time
• Users should always be able to return easily to
  your home page and to other major navigation
  points in the site. These basic links should be
  present and in consistent locations on every page
  

9
UCD No dead-end pages

• Web pages often appear with no preamble readers
  can make or follow links directly to subsection
  pages buried deep in the hierarchy of Web sites.
  They may never see your home page or other
  introductory site information. If your subsection
  pages do not contain links to the home page or to
  local menu pages, the reader will be locked out
  from the rest of the Web site
• Make sure all pages in your site have at minimum
  a link back to the main "home" page

10
UCD Direct access

• Users want to get information in the fewest
  possible steps. This means that you must design
  an efficient hierarchy of information to minimize
  steps through menu pages
• Users prefer menus that present at least five to
  seven links and that they prefer a few very dense
  screens of choices to many layers of simplified
  menus
• Design your site hierarchy so that real content
  is only a click or two away from the main menu
  pages of your site

11
UCD Bandwidth and interaction

• Users will not tolerate long delays. Research has
  shown that for most computing tasks the threshold
  of frustration is about ten seconds
• If your users are primarily general public
  browsers "surfing" the Web via dial-up modem
  connections, it is foolish to put huge bitmap
  graphics on your pages the average modem user
  will not be patient enough to wait while your
  graphics download over the phone line
• If, however, you are building a university or
  corporate intranet site where most users will
  access the Web server at Ethernet speeds or
  better, you can be much more ambitious in the use
  of graphics and multimedia
• In general, be conservative with Web graphics

12
UCD Simplicity and consistency

• Users are not impressed with complexity that
  seems gratuitous, especially those users who may
  be depending on the site for timely and accurate
  work-related information. Your interface
  metaphors should be simple, familiar, and logical
  if you need a metaphor for information design,
  choose a genre familiar to readers of documents,
  such as a book or a library
• The user interface for your Web site should
  follow the general navigation and layout
  conventions of major Web sites because your users
  will already be used to those conventions. Users
  spend most of their time on sites other than
  yours, so avoid highly unusual interfaces if you
  wish to attract and keep a large audience
• The goal is to be consistent and predictable
  your users should feel comfortable exploring your
  site and confident that they can find what they
  need

13
UCD Design integrity and stability

• To convince your users that what you have to
  offer is accurate and reliable, you will need to
  design your Web site as carefully as you would
  any other type of corporate communication, using
  the same high editorial and design standards
• Functional stability in any Web design means
  keeping the interactive elements of the site
  working reliably. Functional stability has two
  components
• getting things right the first time as you design
  the site
• and then keeping things functioning smoothly over
  time
• Information changes quickly on the Web, both in
  your site and in everyone else's. After the site
  is established you will need to check that your
  links are still working properly and that the
  content they supply remains relevant.

14
UCD Feedback and dialog

• Your Web design should offer constant visual and
  functional confirmation of the user's whereabouts
  and options, via graphic design, navigation
  buttons, or uniformly placed hypertext links.
  Feedback also means being prepared to respond to
  your users' inquiries and comments. Well-designed
  Web sites provide direct links to the Web site
  editor or Webmaster responsible for running the
  site. Planning for this ongoing relationship with
  users of your site is vital to the long-term
  success of the enterprise

15
Accessibility

• One of the defining principles of the Web is that
  it should provide all people, regardless of
  physical or technological readiness, with access
  to information
• Around the world, initiatives are under way to
  mandate that disabled users have equal access to
  Internet resources, including the guidelines
  issued by the Web Accessibility Initiative (WAI)
  of the World Wide Web Consortium (W3C) and, in
  the United States, the amendments to Section 508
  of the Rehabilitation Act of 1973
• It is the responsibility of Web designers to
  understand and support the needs of disabled
  users

16
1. Alternates and fallbacks

• The underlying principle of Web accessibility
  guidelines is simple if you provide information
  in any medium besides plain text, you should
  always provide an alternate, or fallback, version
  
• The notion of fallbacks is at the core of the
  language of the Web, allowing rich and varied
  content to transform gracefully under different
  conditions. It also lies behind the injunction
  that no content should become outdated and
  inaccessible because of the progress of
  technology
• Blind users using specially designed software
  will hear (via synthesized speech) the alternate
  messages you supply along with your graphics
  ("ALT" attributes in HTML) and so will not
  completely miss the content of your pictures and
  graphic navigation buttons. Users with text-only
  browsers or those who have turned off image
  display will see the alternate text in place of
  the visual content

17
2. Style sheets

• Your content can be made more accessible if you
  use Cascading Style Sheets (CSS) to style your
  pages. With CSS-styled pages, users can easily
  apply personalized formatting to Web documents. A
  page designed using red text against a green
  background, for example, presents a problem for
  users with red-green color blindness the
  contrast between text and background may not be
  great enough for the text to be distinguishable.
  If the colors are set via a style sheet, users
  can set their browser preferences to override
  your settings and can apply their own style sheet
  to the page instead. With CSS-styled pages, the
  user can transform Web content into a format that
  addresses their requirements for accessibility.
  (see lecture Web Programming)

18
3. Accessibility guidelines

• All professionally designed Web sites or intranet
  sites should meet at least the minimum standards
  for accessibility as defined by the World Wide
  Web Consortium guidelines. The W3C Web site
  contains extensive information on the details of
  how to make your site reasonably accessible to
  blind, deaf, or other disabled users
• See www.w3.org/WAI

19
4. Graceful degradation

• Need to consider what your site will look like to
  those readers who do not have the best equipment,
  current software, or good Internet connections
• The problems here are aggravated by the fact that
  Web site developers generally have much better
  equipment than the average Web site reader. Don't
  design for your machine, design for your average
  reader.
• Always check your page designs on typically sized
  display screens
• Many users with slow modem connections routinely
  turn off the image display in their browser. Try
  turning off graphics in your Web browser and look
  at your pages are they still intelligible and
  navigable?
• Do not produce Web sites that depend on one
  browser technology or browser plug-in