Creating a Usable Web Site Royce Shin - Web Development University of Minnesota.

Slides:



Advertisements
Similar presentations
Mistakes in Web Design. Top 10 Mistakes in Web Design 10. Long download times 9. Outdated info 8. Link colors & consistency 7. Lack of navigation support.
Advertisements

Web Usability Starring the Webcredibles: Link, Dr. Web Credible, & Wendy Warner.
WHAT NOT TO WEAR ON THE WEB (A Fashion Show of Sorts)
1 On-line Versus Paper Whats the Difference? Characteristics of E-reader Characteristics of Online Communication Techniques for Effective Online Help Techniques.
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
With Microsoft FrontPage 2003 Publishing a Web Page.
Principles of Web Design 5th Edition
Web Site Design. Dorky Web Pages Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have.
Refinement Production Implementation Design and Development Stages.
Web Page Usability. Determine User Goals Brainstorm: Brainstorm: Why would users come to your page? Why would users come to your page? What level of information.
Developing Effective Civic Websites An effective website balances what the client wants, what users need, and what constitutes good design by considering:
Web Page Usability. Determine User Goals Brainstorm: Brainstorm: Why would users come to your page? Why would users come to your page? What level of information.
Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,
Project Pertemuan 13 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
INTRODUCTION OF WEB DESIGN 2003 TALL SUMMER INSTITUTE 7/7/2003 Chi-Hua Tseng.
AdvWeb-1/20 DePaul University SNL 262 Web Page Design Design Information Instructor: David A. Lash.
Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
HCI 201 Week 5 Loose Ends. Agenda Image stuff Image stuff File stuff File stuff Bandwidth Bandwidth UNIX UNIX HTML HTML Design elements Design elements.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Book Report Instructional Message Design EdTech 577 Mike Alfred Dr. Linda Lohr, Professor.
User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.
AdvWeb-1/11 DePaul University SNL 262 Web Page Design Design Information Instructor: David A. Lash.
Eleven Design Mistakes Making your web page easier for your students to use Making your web page easier for your students to use FSI Applications.
Basic Web Design Considerations CS /6/07. Basic terms Web page Web page Web site Web site Home page Home page Sub pages Sub pages.
1/12. 2/12 Who is this Lawrence guy? Why am I here? Why is effective web design important? :: See whySee why We will discuss: General Suggestions User.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
Dobrin / Keller / Weisser : Technical Communication in the Twenty-First Century. © 2008 Pearson Education. Upper Saddle River, NJ, All Rights Reserved.
1 Introduction to Web Development. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Web Design, 3 rd Edition 2 Web Publishing Fundamentals.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Document and Web design has five goals:
Planning a Web Site Unit Two Planning Steps 1. Determine the audience & objectives. 2. Sketch a storyboard or flowchart of the pages. 3. Create a folder.
Testing and Debugging Web pages. Final exam Wednesday, May 10: 10am – noon Content: guidelines will be distributed next lecture Format: Matching, multiple.
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
Web-designWeb-design. Web design What is it? Web-design features Before…
Creating Web Sites An introduction to the basics.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
1 WWW-PAGE PLANNING. 2 When starting a web-page project… Focus on reasons to start it (why a web site?) what are the needs for the resources (personnel,
CP3024 Lecture 12 Setting up a World Wide Web Site.
W eb D esign Concepts. The Web Design Process  Design Phase  Production Phase  Distribution Phase  Maintenance Phase.
An Introduction To Websites With a little of help from “WebPages That Suck.
CIS 285 Winter Quarter 2005 Robinson Web Design CIS 285 January 2005.
Fundamentals of Web Publishing MIS 208-B LEC: T 08:15PM-10:05PM- ADM102 LAB: TH 08:15PM-10:05PM - ADM138 Andy Stokes.
Summary Consistency: Make sure you have similar design, similar behavior throughout the site. Strive for consistency in appearance and behavior, because.
Effective Web Writing April Overview - Why Content Matters - Reading Online vs Print - Best Practices with Web Writing - Content Plan/Schedule.
Lesson 8. Test 1 Topics Browser incompatibility Design Tips Site Navigation Browser- safe color Monitor resolution Content Copyright Use of tables vs.
Introduction to Web Page Design. General Design Tips.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
COM 205 Multimedia Applications St. Joseph’s College Fall 2003.
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 1 Web Design & Usability Elfan Nofiari Departemen Teknik Informatika ITB.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Website Design, Development and Maintenance ONLY TAKE DOWN NOTES ON INDICATED SLIDES.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Graphics Navigation Usability Typography Content Clarity & Consistency.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
TECM 4180 Dr. Lam.  What a knowledge base is…  How to conduct interviews…  The difference between data, information, and knowledge…  What information.
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
These standards will serve us well in any technical communication job.
Web-design.
Objective % Explain concepts used to create websites.
Session I Chapter 18 - How to Design a Web Site
COM 205 Multimedia Applications
Objective Explain concepts used to create websites.
ITI 133: HTML5 Desktop and Mobile Level I
Presentation transcript:

Creating a Usable Web Site Royce Shin - Web Development University of Minnesota

Introduction n Describe the general process n Rules of thumb in design

Who’s Involved in Building a Web Site? n Graphic Designer n Visual Designer n HTML Production Engineer n Interaction Designer n Navigation Designer n Information Architect n Usability Specialist n Copywriter n Technical Writer n Software Engineer n Test Engineer n Web Server Administrator n Database Administrator

How Do I Compete? n Don’t, start small - find your niche n Publish original, credible content and good links n Listen to and connect with your audience n Update frequently n Keep loading small and fast n Test your usability throughout

Starting Out n Define your goal n Know your audience - focus group n Gather your content

Design Structure n Develop the information architecture n Develop naming conventions and titles n Build the site map n Work out navigation n Create outlined content pages n Usability test the structure on paper

Design Protosite n Design pages n Create HTML-only protosite n Usability test the protosite

Production n Optimize graphics n Incorporate graphics and content n Add extras n QA testing

Maintenance n More usability n Update content n List with search engine n QA testing

Web Design n HTML / Scripting n Graphic design / Layout / Graphics n Typography n Information architecture n Navigation n Content writing n Usability

HTML n Test in multiple browsers throughout n Avoid frames if possible n Break up long tables n Label important images with ALT n Descriptive blue links n Small pages(20-30k) n Learn browser limitations

JavaScript n Test in multiple browsers throughout n Be aware of differences between JavaScript and JScript n Try not to require JavaScript n Be aware of limitations in different versions

Graphic Design / Layout / Graphics n Alignment n Repetition n Contrast n Balance n Proximity n Optimize images n JPG vs. GIF n Web-safe palette

Typography n Use restraint n Contrast, don’t conflict n Conservative serif font for content n Use HTML text if possible n Black on unsaturated light background for content n Be careful with decorative fonts

Information Architecture n Tree is standard for content-driven sites n Balance width and depth n Categorize into comprehensive, yet limited set of topics n Test this for usability

Navigation n Always link home n Show users where they are n Allow users to traverse back up the tree n Keep navigation consistent n Search engine is a must for over 200 pages

Content writing n Highlight keywords n Meaningful sub-headings n Bulleted lists n One idea per paragraph n Inverted pyramid n Half the word count of print

Usability - Top Ten Mistakes in Web Design n Using frames n Gratuitous use of bleeding-edge technology n Scrolling text, marquees, and constantly running animations n Complex URLs n Orphan pages n Long scrolling pages n Lack of navigation support n Non-standard link colors n Outdated information n Overly long download times

The Ugly Truth - Recent User Demographics n Easy majority use IE n 27% sometimes use browser other than IE or Netscape n 33% using browser older than 4.0 n 90% using Windows n 19% not using JavaScript n 20% have 28k connection or slower n 89% have at least 16- bit color n 25% have 14-inch or smaller monitors n 13% have 640x480 monitors, 55% have 800x600 monitors n 61.4% cite speed as a major problem n 45.4% cite finding new info as a major problem n 30% cite finding known info as a major problem n 79% of users simply scan new pages

URLs n HTML - n Design - n Usability n Users n Web-safe palette - n JavaScript -