Transcript 휴대인터넷 무선환경에서의 효과적인 Broadcast/Multicast 적

Design Principle
2006. 04.11
성백동
[email protected]
Information Communication Engineering
Agenda




Site Structure
The Web Design Dilemma
Web Design Issues
Guideline
2
Information Communication Engineering
Site Structure




Totally connected
Hierarchical
Sequential
Hybrid
3
Information Communication Engineering
Totally connected

Every page has a link to every other page.



Provide a standard navigation bar (navbar) on each page,
containing links to each of the others


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
Indicate current page ("You are here")
http://www.edgescans.com/
4
Information Communication Engineering
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
5
Information Communication Engineering
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=10
5301912&pos_shop_cd=SH&pos_class_cd=111111111&pos_class_kind=
T&keyword_order=%BE%C6%C0%CC%B3%AA%BA%F1
6
Information Communication Engineering
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/
7
Information Communication Engineering
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/
8
Information Communication Engineering
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.
9
Information Communication Engineering
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
10
Information Communication Engineering
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)
11
Information Communication Engineering
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)
12
Information Communication Engineering
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
13
Information Communication Engineering
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
14
Information Communication Engineering
Example
A web page
based
on a printed
design.
With
substituted
fonts and
altered link
color
15
Displayed
on a small
monitor
With font
sizes
increased
Information Communication Engineering
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
16
Information Communication Engineering
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
17
Information Communication Engineering
Inadequate Responses

Fix design – may make matters worse


Reduce all design to level of text-only browser


Turn text into GIF to preserve fonts and layout – slows down page
loading, leaves users with images disabled with nothing
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
18
Information Communication Engineering
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
19
Information Communication Engineering
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
20
Information Communication Engineering
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
21
Information Communication Engineering
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.
22
Information Communication Engineering
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.
23
Information Communication Engineering
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)
24
Information Communication Engineering
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.
25
Information Communication Engineering
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.
26
Information Communication Engineering
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
27
Information Communication Engineering
Web Design Issues



Correctness
Content
Usability
28
Information Communication Engineering
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.
29
Information Communication Engineering
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/


Compelling content can overcome poor design.



Easy readable page.
Barely design , simply text etc.
http://weblib.hufs.ac.kr/
Good design practice can make compelling content more
readable, navigable, welcoming.
30
Information Communication Engineering
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.
31
Information Communication Engineering
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.
32
Information Communication Engineering
Guidelines





Use technology judiciously.
Understand your site's context.
Keep up with change.
Don't neglect aesthetics.
Know your limitations.
33
Information Communication Engineering