User Centered Interface Design Making things easy for your users...and yourself.

Slides:



Advertisements
Similar presentations
Evaluating the Internet by Ms. Gould. Uses of the Internet The Internet has so much information available to find It can be used to find information or.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
PRIORITIZING WEB USABILITY. Introduction  How the Book Study Was Conducted  Tested 69 users ages Broad range of job backgrounds and web experience.
GENERAL USABILITY CONSIDERATIONS. Overview of usability Aspects of usability – Learnability, memorability, efficiency, error reduction Techniques for.
Homepage Design Audience Satisfaction Survey. Survey Goal: The new website design should invoke an aesthetic emotional response with our audience. The.
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.
Maintaining a Website April Old vs New – Maintained with Dreamweaver/Contribute – Style is fixed by template (header, left menu,
Refinement Production Implementation Design and Development Stages.
Mgt 240 Lecture Web Site Design Principles April 5, 2005.
Design Elements of a Web Page. Focal Point Each page should have a focal point to attract the viewer. This can be one large picture or a headline, a combination.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Presented by Ryan Walters. The Site  The main page of the site (seen left) is the users first introduction to the whole site.  The look is clean and.
Design Critique vs. LIS Jill Goldstein Prof. Gilok Choi Chana Ziegler Brian McMains Suki Park.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.
Louisa Lambregts, Class Four.
Paper Prototyping Source:
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
System Analysis & Design Chapter VII: User Interface Design Providing interactive and easy to use interfaces is an important task of system designer using.
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.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Website Research By Sophie Hiscock. Fan Marvel Website You know this website is Marvel because of the characters from the comics are in the body, which.
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Usability By: Sharett Wooten and Gwen Payne. What is Usability Usability addresses the relationship between tools and their users. In order for a tool.
Web-designWeb-design. Web design What is it? Web-design features Before…
1. 2 OVERVIEW First Impressions Content Purpose Design Distinction Closing.
Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,
Progress Report: Project 4 Web Solutions. Interviews (Jennifer) Usability Testing (Andrea Kayne) Final Report due Accessibility Analysis (Andrea.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
Louisa Lambregts, Algonquin College. Today, we will review: 1. website design process 2. what is effective web design? 3. main client project and deliverables.
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.
Task 1 Understand the uses and features of websites Petya Zhechkova.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
Support.ebsco.com EBSCOhost Visual Search Tutorial.
General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. This work is licensed under the Creative.
Office of Educational Technology School District of Philadelphia Introduction to Sites Google Sites This presentation is available at
Web Development. Presentation Design Visualizing your web site or Visual Design.
Better Portal Team Alpha's. General idea... * User friendly - affordances! * Clean, Not cluttered - white space is important! * Efficient - get the info.
Web Design with HTML & CSS Lesson 1. Planning Your Website   Good design comes from decisions that designers make in order to have a certain effect.
Usability Testing & Web Design by Alex Andujar. What is Usability? Usability measures the quality of a user's experience when interacting with a Web site,
Cathleen Karaffa Wordpress/ ckaraffa Test Findings ckaraffa.
Designing & Testing Information Systems Notes Information Systems Design & Development: Purpose, features functionality, users & Testing.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Zipcar ( BK FarmyardsZipcar URL S: The URL is clear, logical and intuitive to Brooklyn Farmyards O: Not all users are familiar with.
Web Site Design 15 Easy Steps to an Excellent Web Site.
Innovation AMS Center for Advanced Technologies Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.
Module 6: The Design Process LESSON 8 The Development Process Module 6: The Design Process LESSON 8.
Creating Google Sites Laura Assem, Director of Technology.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
BY: DAN PREVI Composite Materials. Consistent style and format Easy to find and use links Inviting colors and themes Efficient use of space Convinces.
WEBSITE REDESIGN PROPOSAL Daniel Sterling (818)
Paper Prototyping Source: Paper Prototyping a method of brainstorming, designing, creating, testing, refining and communicating.
Home Page Analysis Darnell Romulus Assignment 1 10/30/2015 Mr.Fonseca.
Web Site Development - Process of planning and creating a website.
1 Evaluating the User Experience in CAA Environments: What affects User Satisfaction? Gavin Sim Janet C Read Phil Holifield.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
1 Web Site Usability Motivations of Web site visitors include: –Learning about products or services that the company offers –Buying products or services.
By Vicky Vickers Summarized by Mr. Parslow Webpage Design.
Web Page Elements Writing For the Web
Web Design and Development
Web Design and Development
User Research Goals Memorability/Desirability Usability
CIS 376 Bruce R. Maxim UM-Dearborn
CMP Creating Your Personal and Small Business Web Sites
Tips on good web site Design
Web Page Design Focus on Usability.
Presentation transcript:

User Centered Interface Design Making things easy for your users...and yourself

The following things have probably happened to you…

Because you’re stupid? No.

Lack of user input results in poor design decisions.

How does this happen?!?

You (the programmer) are not your users. YOUR USERS

How can this be avoided?

Follow the 5 E’s of Usability *Effective *Efficient *Engaging *Error Tolerant *Easy to Learn The best way to design your interface:

Things your users will love:

Do some quick and simple usability testing. Usability testing is setting a series of tasks for people to complete and noting any problems they encounter. How do I know if my design is user-friendly?

What’s the ROI?

Budget Overruns

*Determine design inconsistencies and usability problem areas within user interface. *Establish baseline user performance *Validate concerns *Save $$ Goals of a Usability Test

Before/After Example: Groupon ● Immediately asks for the user's address ● Plain and basic ● Conveys next-to-no information about what a user could "save 50 percent to 90 percent" on. Before

Before/After Example: Groupon ● Contemporary sidebar navigation that breaks down popular categories for savings and deals ● Beautiful, large photography ● Search feature After

Before/After Example: USAToday ● Cluttered mass of text-based links. ● The visual content was practically an afterthought -- after all, of the two largest images on the homepage, one is a display advertisement located at the bottom of the page. ● The logo feels dated and the color scheme uninviting, utilizes primarily blue text on white background Before

Before/After Example: USAToday ● Utilizes best practices relating to layout and site navigation ● Visually appealing, with clean, crisp images of newsworthy stories. ● Offers users the ability to scroll horizontally through the top stories just as you would a print magazine. In fact, the entire experience is very reminiscent of a tablet app, and the site now outshines its competitors. After

Would you buy a car without test driving it first? Usability testing is like test driving a car...for your design.

Hand drawn sketch Forms Wireframes Screenshots HTML prototype Live site API You can test ANYTHING Ct. Management System Software New Programs

How do I conduct a usability test? My friend Matt explains how. ●3-6 people, in your typical user demographic ●Ask them to do a task, without telling them where to navigate to ●The user is never wrong! If they don’t go to the right place, ask them why they made that particular decision and use the feedback to correct your design. ●The biggest design mistakes will be pointed out by most of the participants, such as “I can’t read the text” or “I don’t know where to go next”.

Profit Swim in piles of money because you saved your boss time and money and your users love your design.