Usability OBJECTIVE: Learn “usability” principles related to writing content for interactive media.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

User Interface Structure Design
Navigating Your Website. What is Navigation? Website navigation is what helps visitors find information on your site. Navigation can be images, links,
LIS 677 Interface Critique LIS 677 Presented by Blanca Polo.
Final project Steve Krug Don’t make me think. Principle #1 How we really use the web Have something on the page that catches the readers interest. -Users.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Usability Information Systems 337 Prof. Harry Plantinga.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Web Design, Usability, and Aesthetics 3
Day 9 Navigation Heuristic evaluation. Objectives  Look at some simple rules on navigation  Introduction to Heuristic Evaluation.
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 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Company Names, Logos, and Slogans/Tag Lines Adding these as your “key elements” of web design.
Getting an account with WordPress.com Open your web browser ( mozilla firefox, internet explorer, opera, etc.,)
STEVE KRUG’S WEB DESIGN PRINCIPLE BY YAOFENG CHEN WELCOME TO THE.
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
Slide 1 Consider the page layouts for: Layout design – does it look balanced and even Size of box relative to its importance – the Heading (or title) of.
TERMINALFOUR SiteManager Introduction January, 2014.
– Strategies for Effective Navigation Design & Prototype Phases.
WWW, Web Design, Multimedia Winny Wang Site Design and Site Map.
Unit 21 – Creating Computer Graphics. Logo Static ButtonRoll Over Button Advertising Banner Navigation Bar.
Finishing your site HTML and css 2012 Brian Davison.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
First example – Game of Thrones official website This website includes large images at the every front of the page. These images can be effective for.
Usability of SE/SDI Websites Observations. Good News Most people Like Most things On Most of our Websites.
Review Paul Ammann SWE 432 Design and Implementation of Software for the Web.
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 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
PBA Front-End Programming Page Composition. Page composition Now we know about – Colors – Fonts, texts and editorial style – Links and navigation – …
PRINCIPLES OF WEB DESIGN. EDGAR GARCIA – WEB DESIGN 2/8/13.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Developing a Web Site. Two Components of Web Site Development Systematic Planning Systematic Planning Design and Development Design and Development.
 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.
Innovation AMS Center for Advanced Technologies Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.
Navigate to PDEC Web site. Then click on Workload and Impacts.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.
A process of taking your best guesses. Companies have web sites where you can access your information.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
By Lauren Mayer WEBSITE RESEARCH. NYLON MAGAZINE WEBSITE Header, this is the title of the website and should be the main attraction. This example had.
Introduction to Humanities Computing Spring 1999 Lecture Eight.
Kara Pharris Web Designer Site Improvements & the Usability Project Concepts for usable navigation, functionality and presentation.
Bian Chong (Brian), KHO Supervisor: Linda McIver Second Reader: Jon McCormack.
Web Site Development - Process of planning and creating a website.
Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation.
MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
 ebooks are digital copies of books  Our school has a small (but ever growing) collection that can be accessed via Horizon  ebooks have features that.
Merchants Dashboard Features and Functions A 2-minute guide to using the features and functions on the Merchants Dashboard.
What Is Firefox? __________ is a Web ___________ that you use to search for and view Web pages, save pages for use in the future, and maintain a list.
Biosafety Clearing House Training Workshop date place.
Designing for Usability OBJECTIVE: Learn “usability” principles related to design for interactive media.
Imran Hussain University of Management and Technology (UMT)
Home Site Map FAQ Certif. Glossary Contact Help Search
Website design Emma Purnell.
PBA Front-End Programming
Layout - you need to understand that a simple navigation bar:
Changes coming soon to our portal
Session I Chapter 18 - How to Design a Web Site
Unit 14 Website Design HND in Computing and Systems Development
Designing for the World Wide Web
Information Systems 337 Prof. Harry Plantinga Usability.
Common Page Design Elements
Developing a Web Site.
CMP Creating Your Personal and Small Business Web Sites
The Orsett Surgery Website
Human and Computer Interaction (H.C.I.) &Communication Skills
Presentation transcript:

Usability OBJECTIVE: Learn “usability” principles related to writing content for interactive media.

The Basics Human-Computer Interaction (HCI) Usability refers to how easy or difficult it is to get around a web site, CD-ROM, or other interactive environment. Navigation is the way we get around inside a site. Ituitive Experience Expected ways to navigate usability guru Jakob Nielsen (useit.com)

Webpagesthatsuck.COM Yup, this is a real site.

Why does this site suck?

Nielsen says every page must answer: Where am I? Where have I been? Where can I go? What can this site do for me?

“Where am I?” Logo, Page Titles, Matching Buttons

“Where can I go?” Clearly labeled links, buttons, etc. Clear: Tree frogs are usually green. Unclear: Click here to learn more about tree frogs.

Simplicity -Navigation Bars -Breadth over Depth -3-click Rule

Simple – static menus

Drop-down – top remains same, side menu changes

Menu Breadth Use menus, avoid “back” buttons Keep menus consistent Show what you’re selling Instead of “products” or “store” or “services,” get specific, unless products and services are sidelines Breadth Over Depth: 3-Click Rule

Other Common Buttons About (should be viewer-centered, not company centered) Contact (should be on the main menu) FAQs (frequently asked questions) Services show process, too (step by step) “How Accupuncture Works”

CONTINUED...