Designing for Usability OBJECTIVE: Learn “usability” principles related to design for interactive media.

Slides:



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

PRIORITIZING WEB USABILITY. Introduction  How the Book Study Was Conducted  Tested 69 users ages Broad range of job backgrounds and web experience.
User Interface Structure Design
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
LIS 677 Interface Critique LIS 677 Presented by Blanca Polo.
11 HCI - Lesson 5.1 Heuristic Inspection (Nielsen’s Heuristics) Prof. Garzotto.
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.
Visual Basic Prototyping Visual Basic uses both a Visual Editor and is Code Based. With several simple lines of code, Visual Basic will navigate between.
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
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
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.
G063 - HCI Design Perception, Attention, Memory & Learning (PALM)
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.
Navigation Design. From the Brookfield Zoo, IL  (from Zoo)
User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.
Charmin Suttles TEC 542.  What is an interface? ◦ Thorsen(2009) describes an interface as “the consistent color, font style, and placement of informational.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
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.
Dreamweaver MX Unit A CIS 205—Web Site Design & Development.
Web Design.
Connie Hancock University of Nebraska - Lincoln Extension Educator
What’s New in SkillPort 7 Presenter Name Title. SkillPort 7 – a whole new look and feel! Complete redesign of the SkillPort User Interface –Both Student.
Giving Your Web Customers a Reason to Stay.  Web visitors only take 5 SECONDS to decide whether they want to stay on your site  “Users don’t read, they.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
Review Paul Ammann SWE 432 Design and Implementation of Software for the Web.
4 Simple Web Design Rules. Your Web Site Should Be Easy To Read  Choose your text and background colors very carefully  Don't use backgrounds that obscure.
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.
User Interface Structure Design Chapter 11. Key Definitions The user interface defines how the system will interact with external entities The system.
Slide 1 Chapter 11 User Interface Structure Design Chapter 11 Alan Dennis, Barbara Wixom, and David Tegarden John Wiley & Sons, Inc. Slides by Fred Niederman.
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.
1 After completing this lesson, you will be able to: Transfer your files to the Internet. Choose a method for posting your Web pages. Use Microsoft’s My.
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.
Windows User Interface and Web User Interface By E. Marlene Graham.
Navigation and Presentation Design Peter Dolog dolog [at] cs [dot] aau [dot] dk Intelligent Web and Information Systems October 7, 2010.
Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.
Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 13(a) This presentation © 2004, MacAvon Media Productions Design Principles.
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.
Interactive Media Design Week 2
Software 3 See Edmodo for images Group name: topcat Group code: i4qf9a 11/03/11.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
CMPF114 Computer Literacy Chapter 3 The Visual Basic Environment 1.
Design Phase intro & User Interface Design (Ch 8)
1 Human-Computer Interaction Web Interface & Natural Language.
Cs413_design02.ppt GUI Design The User Controls Navigation Traditional GUI design the designer can control where the user can go gray out menu options.
Web Site Development - Process of planning and creating a website.
Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation.
Ten Usability Heuristics with Example.. Page 2 Heuristic Evaluation Heuristic evaluation is the most popular of the usability inspection methods. Heuristic.
Unit 13- Web Design P1-Explain the intended uses and features of two different websites. M1-Review how the features in two websites improve presentation,
Information Design Goal: identify methods for representing and arranging the objects and actions possible in a system in a way that facilitates perception.
Usability OBJECTIVE: Learn “usability” principles related to writing content for interactive media.
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.
Imran Hussain University of Management and Technology (UMT)
Web Design and Development
Web Programming– UFCFB Lecture-4
Unit 14 Website Design HND in Computing and Systems Development
Systems Analysis and Design
Designing for the World Wide Web
Information Systems 337 Prof. Harry Plantinga Usability.
Developing a Web Site.
Human and Computer Interaction (H.C.I.) &Communication Skills
Presentation transcript:

Designing for Usability OBJECTIVE: Learn “usability” principles related to design for interactive media.

Terms INFORMATION DESIGN Organization and presentation of information on a page INTERFACE DESIGN Design of the elements the user interacts with (e.g., buttons, menus, etc.)

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. Intuitive 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. Use your “Store Window”

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

Simple - consistent 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

QUESTIONS? © 2005 Juliet Davis