information communication engineering design principle 2006. 04.11 성 백 동 [email protected]

Information Communication Engineering

Design Principle

2006. 04.11성 백 동

[email protected]

2 Information Communication Engineering

Agenda

Site Structure The Web Design Dilemma Web Design Issues Guideline


Site Structure

Totally connected Hierarchical Sequential Hybrid


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/


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


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?

goodscode=105301912&pos_shop_cd=SH&pos_class_cd=111111111&pos_class_kind=T&keyword_order=%BE%C6%C0%CC%B3%AA%BA%F1


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/


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/


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.


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


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)


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)


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


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


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


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


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


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


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


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


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


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.


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.


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)


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.


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.


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


Web Design Issues

Correctness Content Usability


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.


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.


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.


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.


Guidelines

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

information communication engineering design principle 2006. 04.11 성 백 동 [email protected]

Documents