1	Web Publishing for Editors ManagementStart.nl
2	Introduction
3	Objectives Improve understanding of all major aspects related to publishing text on the web so you will be able to achieve effective results. Web Publishing Technology User Interface Design Communication / Text Publishing
4	Introduce yourself... Name Job title Background Experience Web Publishing Technology User Interface Design Communication / Text Publishing Expectations
5	Today’s Rules Interaction Coffee Lunch Slides No further Rules...
6	Programme for today Introduction to the Internet Speed HTML Course Meet the Web User The Elements of User Experience Interface Design Guidelines The Web Communication Model Writing for the Web - Conclusions
7	Introduction to the Internet
8	The Internet - Basic Concepts The Beginning Information, Communication, Application Network of networks Clients & Servers A specific client for a specific server
9	Fundamental Technology HTML / XML / RTF / ... HTTP / SMPT / NNTP / Gopher / FTP TCP/IP Network
10	Client - Server Communication Finding a Computer IP Adress Setting up session TCP Starting Communication HTTP Sending & Receiving HTML
11	Building Web Sites HTML Plain, Tables, Frames, CSS, Layers Javascript / VBScript Java Flash CGI - Common Gateway Interface ASP - Active Server Pages XML
12	Web Sites are built by: Programmers Web Designers Graphic Designers Information Architects Text Editors Database Specialists Network specialist etc….
13	The User Experience Websites consist of: Lay out Pictures Text Functionality Their combination builds the User Experience!
14	Real Word vs. Internet Real world information and media: News in newspaper Entertainment on television Movies in cinema Scientific articles in magazines etc. The Internet simulates all media… What does this mean for the design?
15	Speed HTML Course
16	An amazing tool….
17	Meet the Web User!
18	Meet Gerald… a ‘typical’ web user
19	A ‘typical’ web user... Wants service delivered fast Hates reading long texts on screen Hates to scroll Hates to click through complicated structures Wants an appealing but functional lay out Wants updated information Prefers to be anonymous Hates unsolicited mail & adverts Likes interaction in web pages
20	User Behaviour in web sites
21	User Characteristics Personality Level of education Relevant Knowledge Background Mood of the Day Time availability Job
22	Context Aspects Objectives / Purpose of activity Entertainment Seek information Needs service Communication Time pressure Peer pressure Relation to other activities (dependency) Stress factors etc.
23	Technical Environment Network bandwidth reliability Operating System Browser type version Screen resolution & size Installed software components
24	User Behaviour Focus - aiming for specific target Patience - willing to wait Persistence - does not give up Effectiveness - able to use interface Emotional - reaction to events Now meet Sally and Herald!
25	Sally... User Characteristics: 40 years old woman, ‘newbie’ on the Internet, computer user for less than a year. Context Aspects: Is looking for cheap vacation. Heard Expedia.com advert, is using computer of friend. Technical Environment 56k6 modem, Pentium 200 MMX with Windows 98 and Internet Explorer 5 without any plug-in. What can we tell about behaviour of Sally? Focus, Patience, Persistence, Effectiveness, Emotional
26	Herald... User Characteristics: 20 year old computer geek. Loves programming in C++. Context Aspects: Is looking for information on J.S. Bach because he has to write a thesis. Needs it really fast. Is interested in material that is easily copied and edited. Technical Environment Linux with ADSL. Prefers text-only browser Lynx. ISDN modem. What can we tell about behaviour of Herald? Focus, Patience, Persistence, Effectiveness, Emotional
27	Conclusion When designing web sites or writing text… Know your audience Predict their behaviour Adapt your design and text!
28	The Elements of User Experience
29	Introducing User Interface Design The quality of the user experience defines the quality of the product… The alarm clock The new software system …do you know an example? UID is about designing the way the user interacts with the system...
30	Meet the Elements... Meet the Elements…the layers of experience... The Surface Plane The Skeleton Plane The Structure Plane The Scope Plane The Strategy Plane Building from Bottom to Top!
31	Duality The Web as: Software Interface Hypertext System (page 33)
32	The Strategy Plane Defining the Strategy for the site What do we want to get out of the site What do users want to get out of the site Site Objectives: Why are we building this? Business Goals, Brand Identity, Success Metrics User Needs User Segmentation: demographic, psychographic Usability Team Roles and Process Strategy Document
33	The Scope Plane Defining the scope So you know what you’re building So you know what you’re NOT building What are we going to make? Gathering requirements by User Research Functional specifications Positive & specific Content Requirement Development & maintenance Prioritise Requirements
34	The Structure Plane Defining the structure Interaction Design Conceptual Model Error Handling Prevention, Correction, Recovery Information Architecture Top-down or Bottom-up Architectural Approach Hierarchical Matrix Organic Sequential
35	The Skeleton Plane Interface Design Controls & Metaphors Navigation Design Global, Local, Supplementary, Contextual Information Design How to present information Result in ‘Wireframes’ Consistent Page Layout
36	The Surface Plane Definining the Surface Follow the Eye Contrast and Uniformity Internal and external consistency Color Palettes Typography Document in ‘Design Comp’ and Style Guide
37	Applying the Elements You are asked to design a website for ‘The Budel Telegraph’, a local newspaper that wishes to improve it’s customer loyalty and expand it’s client base through the website. What can you tell about the design considerations in each of the design planes? Prepare a short presentation with your group for the management team of the newspaper to help them decide what steps to take from here and what to consider when making key decisions.
38	Interface Design Guidelines
39	Guidelines Interface Design uses information from research in several fields of science… Cognitive Psychology ex: Short Term Memory Sociology ex: Cultural Influences Educational Science ex: Learnability of interfaces Medical Science ex: Color Blindness
40	General Guidelines
41	Guidelines from Psychology Are objects distinct and recognisable? Can objects be directly manipulated? Is text and vision combined? Are metaphors clear and correct? Is the STM not overloaded? Are visual clues presented for storage in LTM? Are objects not ambiguous?
42	Interaction Guidelines Is the interaction style easy to understand? Is interaction consistent? Can interaction be personalised? Is principle of WYSIWYG applied? Is the user in control?
43	Lay-Out Guidelines Is a grid applied? Is the lay-out consistent? Is use of colors functional? Are physical limitations supported? Does lay-out support ease of use? Does the lay-out limit speed? Are objects pre-loaded? Are multiple devices supported consistently? Is lay-out symmetric? Are figures boxed?
44	Interface Principles User Compatibility Product Compatibility Task Compatibility Consistency Recognisable Simplicity Direct Manipulation
45	The Web Communication Model
46	Classic Communication Sender Receiver Message Medium What can we tell about these elements of communication in a web environment?
47	Sender You are the sender, so… Match to your audience… Level of language Style of language Predict Audience behaviour Focus Persistence Patience Effectiveness Emotions
48	Receiver Personal Characteristics, Context Aspects and Technical Situation will influence… Interpretation Evaluation Reaction
49	Message Each message is: Referential Refers to facts or events Expressive Tells something about Sender Relational Influences relation Sender - Receiver Appealing Influences behaviour of Receiver
50	A written message Structure What is the build-up? Style What style of writing? Composition What elements? Typographic How does it look? Visualisation Pictures and figures to support message Formulation What words to use?
51	And Internet is the medium You are asked to write an article for the Budel Telegraph for their ‘Fashion’ section in the web site. Audience are young people that the BT would love to have as new clients. The web site uses database technology. What can you tell about the sender and receiver for this message? What would you suggest as guidelines for writing this message?
52	Writing for the Web - Conclusions
53	What did you learn? You will be contributing to your web projects as an editor. What do you conclude after today when thinking of: Internet Technology The Web User User Interface Design The Web Communication Model
54	Final Tips & Tricks (1): Remember Internet Technology: The web was built for stability, not speed Connections may fail Parts of presentation layer may get lost because of networking issues Each browser interprets slightly different, no web site is fully cross-platform consistent Interactive web pages require correct software to be installed In the near future, the Internet will be on many devices
55	Final Tips & Tricks (2): Know your audience: Do they need your message? Remember they sometimes will be impatient Make sure your message is easy to be retrieved Consider a wide variety in audience characteristics Predict their behaviour as detailed as possible Remember the context and technical situation of your audience may vary significantly
56	Final Tips & Tricks (3): Optimizing User Experience: Build a consistent, attractive and functional interface that is easy to learn and easy to use. Combine text and images / animation to support the message. Support trial and error within the interface Make sure the environment is robust Enable personalisation and flexibility Make the interface effective and efficient! Make hierarchy of site as flat as possible Support several navigation styles
57	Final Tips & Tricks (4): Enable good communication: Analyze your message before starting to write Long text? Structure it well. Show structure by using typographic and visual elements. Make text printable Be to-the-point and write unambiguous Use key words and headings to attract attention Use hypertext for referrals Analyze, Design, Develop, Test, Implement, Evaluate and Revise!
58	Final Questions