Chapter 17 Designing for the web

Slides:



Advertisements
Similar presentations
Research Methods and Usability Guidelines for Ecommerce Web Sites Mary Czerwinski Microsoft Research Note: Many of these slides came from a Keynote address.
Advertisements

Usability Prepared by: The NYS Forum for Information Resource Management IT Accessibility Committee.
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2: Planning.
Principles of Web Design 5th Edition
LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Interface / navigation COM 366 Web Design & Production.
Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.
Web Printing Continue on Web Usability It is a good idea that web sites can provide a printing version and browsing version for the same document.
Chapter 8 Designing with Cascading Style Sheets. Chapter 8 Topics Building three different types of complete Web pages using CSS: Build a style sheet.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Chapter 8 Document Design 2 Page Layout
Chapter 15 Designing Effective Output
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Designing for the Web 7 Useful Design Principles.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
CS3205: HCI in SW Development More on Detailed Design: Guidance and Color.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
A’lan Abruzzo Online Strategic Consulting and User Experience Design January 5 th 2009 Leading Hotels of the World Brainstorming.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Web-designWeb-design. Web design What is it? Web-design features Before…
◦ A single seamless whole. ◦ Simplicity is the key UIDE Chapter 14.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Chapter 2 Web Site Design Principles
Web Design.
Web Site Design Principles
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.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart.
MS FrontPage 1: Developing a web site for the Sunny Morning Products Yong Choi CSU Bakersfield.
Website Usability presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design evaluating and planning for web design.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
1 Human Computer Interaction Week 10 Web Usability.
Chapter 11 Designing Effective Output
Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2.
Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.
Interface Design Web Design Professor Frank. Design Graphic design and visual graphics are equally important Both work together to create look, feel and.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.
IWM 14 Information Architecture: Designing Navigation.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Accessibility : Designing the Interface and Navigation The Non-Designer’s Web Book Chapter 7 Robin Williams and John Tollett Presented by Sherie Loika.
By: Caitlin McCullough, Kaitlyn Kauffman, and Alexis Bergquist.
Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page.
Lesson 8: Navigation. Overview  The manner in which you display your web site’s navigation is crucial to its overall usability.  Users need a clear.
Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.
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.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Web Interface Design Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces.
What is Good Web Design? A compendium of web concepts.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
Structuring and Managing Online Learning Environments.
Chapter 2 Web Site Design Principles
Web Usability Stephen Kimani.
Web-based structures, links and testing
Web Site Design Plan Checklist
Web-design.
Website Design and Management Section 3 - Design
Lesson Objectives Lesson Outcomes
Corporate Web Development Training:
HCI and Hypermedia/WWW
Web Design Tips.
ICT Communications Lesson 4: Creating Content for the Web
Presentation transcript:

Chapter 17 Designing for the web

The Lovely Rooms Hotel Booking Service Domain - hotel booking service, B&Bs, <=5 rooms Users – vacationers, UK residents, business travelers Tasks – recommend a choice of three hotels nearest, offers pecial rates and discount packages, book online. Environment – easy to use site Technology – low-spec PCs, download as quickly as possible. UIDE Chapter 17

The Lovely Rooms Hotel Booking Service Conceptual Design Primary Task Object: Hotel Attributes – B&B, converted older property Actions – Browse and search Metaphors – list and map results UIDE Chapter 17

Design Principles for Web Sites Homerun (Nielsen 2000) High-Quality Content Often Updated Minimal Download Time Ease of Use Relevant to User’s Needs Unique to the Online Medium Net-centric Corporate Culture UIDE Chapter 17

Conceptual Design UIDE Chapter 17

Designing Web Sites Designing the Web Site Structure Helping the Users Know Where They Are Helping the Users Navigate around the Site Structural navigation – other pages within the same site Associative links – same page links “See Also” links – to other web sites Navigation Aids UIDE Chapter 17

Navigational Aids 1,2,3,4,5 Color of text links Make names of links meaningful Buttons or graphical images Drop-down lists Site map Breadcrumb trail Geographical or visual maps Navigation bars UIDE Chapter 17

UIDE Chapter 17

Design Considerations How deep and how wide should the hierarchy be? Is it better to divide a block of information into several short pages or leave it as one long page? Can several web pages be combined into one larger one? Does the structure of the site reflect the structure of the tasks the user wants to carry out? How should the site content be grouped? UIDE Chapter 17

UIDE Chapter 17

Find a Lovely Room UIDE Chapter 17

Lovely Rooms web site UIDE Chapter 17

Designing Home Pages and Interior Pages Designing the Home Page Tells the users where they are Tells the users what the site does 1,2,3,4 Designing Interior Pages UIDE Chapter 17

Design Issues for Web Pages Widgets on Web Pages Scrolling - 1 Designing for Different Screens and Platforms – 1,2 Using the Screen Area Effectively UIDE Chapter 17

Design Issues for Web Pages Using the Screen Area Effectively Using Style Sheets - 1 Designing for Accessibility - 1 UIDE Chapter 17

Writing the Content of Web Pages Keep Text to a Minimum <=50% Help Users to Scan – use headings and subheadings, bulleted and numbered lists, highlight Dividing Long Blocks of Text into Separate Sections UIDE Chapter 17

UIDE Chapter 17

Feedback: Privacy Policy Feedback
Do Not Sell My Personal Information
About project: SlidePlayer Terms of Service

© 2025 SlidePlayer.com. Inc. All rights reserved.