44212: Web-site Development

1. 44212: Web-site Development Web-Site Design Ian Perry Room: C48 Extension: 7287 E-mail: I.P.Perry@hull.ac.uk http://itsy.co.uk/ac/0607/Sem1&2/44212_WSD/

2. Where to begin? • Define your Business Goals: • decide which business processes are best supported (or replaced?). • Be clear why you are creating this site: • by deciding what you want your Web-site to Be and Do. • Make sure that you: • Know your Audience!

3. Audience Analysis • Who do you want to reach: • why might they come? • where are they in the E-business Supply Chain? • Based on your business goals: • what action do you want them to take? • Web-site design is very different for: • a news/newsletter site. • a information/technical support site. • a product/services sales site.

4. Why & How Often might they Visit? • Why? • to read company/product/service descriptions; • with detailed up-to-date information. • to communicate, by; • filling in on-line forms, participating in on-line discussions, completing on-line surveys, requesting that someone e-mails/phones them back. • to purchase products/services. • which often need to be delivered in the ‘real’ world. • How Often? • infrequently, weekly, daily, more often.

5. Where do they come from? • A number of technical constraints might apply, e.g: • Bandwidth • not so relevant these days. • Browsers • not everyone uses Internet Explorer. • Video & Sound • don’t expect everyone to have a top of the range Graphics Card, or to have their sound turned on. • All too often: • Designer = High-spec Computer. • Customers = Lower-spec Computers.

6. Design Decisions • What are your assumptions about user preferences? • Will information be consumed on screen or printed for later? • How patient will your audience be? • Simple, static, mostly text-based Web-sites will be fast and clear; • but can seem dull. • Complex, interactive, multimedia Web-sites may be more interesting; • but might be slow & confusing.

7. More Deign Decisions • Balance of Text & Graphics • lots of text with few graphics. • lots of graphics with little text. • Typography • big & bold, youthful, elegant, artistic, etc. • Media Mix • static images, animation, sound, video, etc.

8. Yet More Design Decisions • Design & Graphic Style • award winning, avant-garde, friendly & reassuring, ‘in your face’, etc. • Colour Palette • earth tones, psychedelic colours, soothing pastels, etc. • try to use contrasting, non conflicting, colours! • Logos & Branding • style, location & frequency.

9. Remember your Audience • You are NOT designing for yourself: • design is no substitute for functionality. • Make it easy to find what matters: • snail-mail addresses and telephone numbers should not always be easily found! • Have realistic expectations: • even if they are modest ones. • Start small, but design for scalability: • Web-sites suit a phased development, but “Under Construction” notices are BAD!

10. Things NOT todo on a Web Page • Here are what I believe to be the most important things to avoid. • Don't crowd images. • Too many images: • can be confusing, • may not ‘fit’ on a screen set to a low resolution, • and will make your Web pages slow to download.

11. Things NOT to do! • Don't be inconsistent with structure. • Inconsistent structure leads to confusion: • where the hell am I? • is this the same Web-site? • Consistent structure is comforting: • a nice place to visit. • easy to navigate. • easy to find things.

12. Things NOT to do! • Don't have too much information on a single page. • Too much information(?): • becomes data; i.e. may not be read, or understood. • Keep it short & snappy: • break things up into a number of short, hyperlinked pages.

13. Things NOT to do! • Don't leave the important stuff for the bottom. • Say what needs to be said at the top of each Web page: • Your audience may not make it down to the bottom of the page. • Another reason to keep it short & snappy: • Web pages are meant to be read on a computer screen, which is a totally different ‘shape’ to the ‘usual’ A4 document.

14. Things NOT to do! • Don't violate white-space balance. • This can be tricky. • A matter of personal preference? • Too much white space • And you are ‘wasting’ the limited resource that is the computer screen. • Too little white space • And your Web pages look ‘crowded’.

15. Things NOT to do! • Don't forget other platforms & browsers. • The person viewing your Web Pages is very unlikely to have the same Computer and Software that you have: • and even if they do, the chances of that Computer and Software being set-up in exactly the same way are remote. • When evaluating your Web-pages: • always ask yourself, what if someone was looking at this; using a different browser, on a different computer, at a different resolution?

16. “Keep it Simple” • And your Web-site will be: • easier to build; • consistent structure, common ‘look-and-feel’, easier navigation, etc. • easier to maintain; • no Web-site is ever complete, they are always ‘under construction’, so NEVER say so! • And remember that “less is definitely more”: • except when it comes to testing!

17. Before Next Week’s Workshop • Please explore the; • ‘Web-site Design Links’, • on the ‘Other Resources’ page of the ‘WSD Web-site’; • in order to find out what is considered to be “good” and/or “bad” with respect to Web-site Design.