1 27

Web Design

Sus Lundgren

2 27

Web: Advantages• Quick and easy publishing

• Information is easy to change, update, increase, remove

• No limits when it comes to– Number of pages

– Number of images

– Colors

• Hypermedia– Cross-referring very easy

Much easier than working with printed matter!

3 27

4 27

Web: Disadvantages• Hypermedia

– Chaotic spaghetti

– Can’t control reading order

– Links to and from other websites

• Credibility

• Information decay

• Security issues

• The pages look different depending on browser, OS and settings

• Limits when it comes to– Plug-ins

– Bandwidth

5 27

A ComparisonFocus Conditions Update

Web Info

MarketingSales

Functionality/Services

Unpredictable Easy, seamless

Print Info

Marketing

Sales

Clear: set Impossible

GUI Functionality May be set,

Rather clear

Semi-hard

(patches, updates)

6 27

A ComparisonOrder Aestethics Functionality

Web Hyperlinked

Unpredictable

Look & feel important

Limited

Print Structured

Predictable

Look & feel important

None

GUI - Functionality over form

Unlimited

7 27

A ComparisonSecurity Issues

Prod. Costs Key skills

Web Huge Personnel Design: web; information; interaction; graphic

Print None MaterialPersonnel

ProductionDistribution

Design: graphic; information

GUI Controllable Personnel

(Production)

(Distribution)

Interaction design, programming, db

8 27

• A web page is static– It cannot by itself react on what the user

does; this requires some kind of submit to the server, and response from it

• A web page is poor– HTML alone cannot provide things like

animations, interactive responses etc

• A “normal” client-side application is dynamic– Sometimes these too work against a server,

but some data (e.g. data categories) are downloaded during launch; e. g. choices made in one menu may affect another

Web vs the “Normal” GUI

9 27

Web: Challenges• Creating a stable design that works in any

combination of browser, OS, window size and bandwidth– SIDER,

http://www.cs.chalmers.se/idc/sider06/

• Creating good navigation and consistent look & feel

• Attracting and keeping the users– Unique services

– Unique information

– Unique products or prices

10 27

On Posture…• A web site has a posture somewhere in

between sovereign and transient– Who are your users and your services?

• Returning users?– Sovereign posture

– Allow customization, e.g. color settings and sorting of information

• Once-in-a-lifetime-users– Transient posture

• Information-dense website?– Extreme focus on navigation

– Transient info areas, e.g. stock market tickers

11 27

Web: Challenges

”I don’t WANNA

learn your site! I

just wanna DO MY

THING!”

http://www.useit.com/jakob/photos/

12 27

Design Guidelines• The most important question for the web

designer: What’s the message, and to whom is it directed?

• Thus, the content and the look&feel must be adapted to the target group and, to some extent, the sender– Don’t forget adapting the language!

– If there are more then one target group, they should be ranked

• A keyword is consequence;– Consequent and clear navigation

– Consequent look

– Consequent language & wording

13 27

Information design• The information structure should

– Reflect content and message

– Be logical and easy to navigate

• Shallow & wide or narrow and deep?– The latter preferred by newbies

• Decide which pages should exist set a structure set the navigation design

• Decide: Should a info unit (”a page”) exist on more than one place? Or be linked?

Environmental concernms both under ”Production” and ”Policies”?

14 27

Navigation• Shall reflect the information design• Shall be consequent• Shall indicate system state: where am I?

This can be done in several ways– Visual changes in the navigation area– Bread crumbs (E.g. Products – Books-

Fiction - Thrillers)– Headlines– Color coding or use of icons

• Wording is very important!!!– ”Alla märken” vs ”Alla plagg”

• Elements can be grouped using closeness, similarity or coloring

15 27

Wording

16 27

Wording

17 27

Web page design• Define how many different templates you

need. One? Two? Many? Which one is the most important?

• Create the design in any way that suits you– Photoshop or any other drawing program

– Directly in HTML

• Be sparse with colors, generous with space and stick to one kind of illustrations

• Test your templates very carefully; make sure they are stable and that all links work.

• If you use tables or layers, make sure to check all browsers – and don’t forget to test with different window sizes, resolutions etc

18 27

Text• Texts should be kept short(er than in print)

– Users not as patient

– Harder to read on screen

• Long documents should come in several versions; one page with contents, as PDF...

19 27

Miscellaneous• Don’t forget to give pages a Title• State keywords as meta information

– Facilitates search• Contact information should be easy to find• Name images – facilitates for blind users• Frames or not?

– Maintenance easier– Harder to bookmark

• Navigation on top of page or to the left– Repeat navigation as simple text links at the

bottom of the page• NO horizontal scrolling – ever• Logo linked to index page

20 27

Design Issues• Flexible width?

– lundsus@cs

– Designmuseum

– Designmuseum400

– GG

• Font size– As pixels/points

– Relative?

• Banners, ads; where?– Designmuseum

• Designing for variable content

21 27

22 27

• Plug-ins can provide animated instructions or rather responsive programs– Flash, Shockvawe, Java-applets

• Code can be embedded in the HTML– JavaScript, JScript, VBScript

– These are interpreted (non-compiled)

• Code can be server-side, it’s in its own file and is linked to from the page– Perl, Tcl

How Can a Web PageBe Made Interactive?

23 27

Complex web systems• E-commerce sites, intranets, extranets,

forums

• Need for functionalities like– Publishing possibilities

– Login functionalities & secrecy

– Adding material for downloads

– Shopping cart functionalities

– Memory within session (e.g. e-commerce; what if the system currently forgot what was in the shopping cart?

– Different users have different access

24 27

• A web system consists of at least…

• If a database is involved

Technical setup

25 27

• If a publishing system is involved…

– Or perhaps order handling, user management etc…: software to access the database info is needed

• Web design is not just about surface; just like any other GUI it is about interaction, and it takes both design and engineering!

Technical setup

26 27

• Templates, templates, templates– Normally all pages are dynamic, i.e. a code

layer creates each requested page on-the-fly using snippets of HTML code filled with added database content

• Navigation is template-run too– No need for frames from a maintenance-

point-of-view

• Re-usability keyword of the day– Different templates for different pages, but

perhaps there are areas that occur on every page (e.g. the part with the logo?)

Web Design for Complex Systems

27 27

• Templates are often object related– One template per object (e.g. news item,

case, calendar item, link item…)

– Additional templates, e.g. to present a group of objects (front page for link list, front page for calendar items etc)

• Remember: Can only show info that is actually in the database, or can be calculated using this info…– Not all customers understand this: “Oh,

and can you show the buyers when their stuff will be delivered, exactly?” “Oh, and can you take down the moon for me?”

Web Design for Complex Systems

28 27

Case: Linuxnyheter• Linuxnyheter was a website with news

about Linux and Open Source

• Linuxnyheter was targeted towards executives and IT-managers

• It consisted of five major sections– news, articles, cases, links and events

– In addition, there was a search engine, a dictionary, customizing functionalities etc.

• Zope interface contained the database and created web pages

• Java servlet interface for the publishing system

• Linux server

29 27

30 27

31 27

32 27

33 27

Links• HTML basics

– http://www.davesite.com/webstation/html/

– http://www.htmlgoodies.com/primers/basics.html

• Dreamweaver– Download a trial version:

http://www.macromedia.com/downloads/

– Check out a tutorialhttp://www.macromedia.com/software/dreamweaver/productinfo/tutorials/gettingstarted/

34 27

Links• On web design

– Web Page Design for Designers http://www.wpdfd.com/index.htm

– Vincent Flanders’ ”learning by not doing”: http://www.webpagesthatsuck.com

• Usability– Jakob Nielsen: http://www.useit.com/

– Usable Web, link collection: http://usableweb.com/