CS 174: Web Programming November 25 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak.

Slides:

Advertisements

Similar presentations

Author: Steve Krug Presented by: Nicole Wilson

Advertisements

DON’T MAKE ME THINK Steve Krug.

A Common Sense Approach to Web Usability Steve Krug Highly Recommend Resource!

Don’t Make Me Think (the slides) Dan Fleck SWE 632 gmu

1 Today’s Goal: Web Design for Usability To become able to appreciate the role of usability in Web design To become able to identify some of the factors.

Introduction User Patterns September 4 th, User Patterns in Software Safe Exploration Instant Gratification Satisficing Changes in Midstream Deferred.

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.

Group Project. Don’t make me think Steve Krug (2006)

Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.

Web Design, Usability, and Aesthetics 3

Web Design, Usability, and Aesthetics 2 Billboard Design 101 “Designing pages for scanning not reading” Notes from book “Don’t Make Me Think: by Steve.

Web Design, Usability, and Aesthetics 1 Notes from book “Don’t Make Me Think: A Common Sense Approach to Web Usability” by Steve Krug.

Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.

© Anselm Spoerri Lecture 14 Annotated Nike Ad Course Review –Course Objectives.

Do’s and Don’ts of Web Design By: Cassandra VanHumbeck.

CS 235: User Interface Design January 22 Class Meeting

Website Design. Designing and creating different elements involved in developing a website for e- commerce can help you identify and describe the components.

STEVE KRUG’S WEB DESIGN PRINCIPLE BY YAOFENG CHEN WELCOME TO THE.

Nick Donnarumma. We are either very lazy or very efficient because we tend not to read pages. We scan them instead to save time. We don’t figure out how.

CSI-553 Internet Information Presented by: Ignacio Castro June 28, 2006 Internet Usability.

Dawn Pedersen. Web Interfaces Web interfaces allow a user to interact with a website. The simplest web interfaces provide information and allow the user.

CS 235: User Interface Design February 17 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak

Designing for the Web 7 Useful Design Principles.

From Don’t Make Me Think by Steve Krug. Avoid cute or clever names, marketing induced names, company- specific names and unfamiliar technical names.

What Is Usability? Usability is a quality attribute that assesses how easy Web sites are to use. “Usability" also refers to methods for improving ease-of-use.

Don’t Make Me Think Steve Krug Dean Steuer MFC 215.

© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.

CS 235: User Interface Design August 25 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

CS 235: User Interface Design September 29 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

Don’t Make me Think Guiding Principles Summarized by Andrew Piatek

SWE205 Review Spring Why is software unusable? Users are no longer trained. Why? Feature creep Inherently hard: a problem of communication Designed.

Billboard Design 101. Create a clear visual hierarchy The more important something is, the more prominent it is.

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.

CS 235: User Interface Design October 15 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)

Web Site Usability: Chapter 3 Billboard Design Summary Notes on Steve Krug Don’t Make Me Think New Riders, 2 nd Edition Ben Hunt Web 2.0 How to Design.

Website Usability presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design evaluating and planning for web design.

Unstated Requirements And useability 1. Many UI decisions End up being made by the technical development/implementation staff End up being made by the.

CS 235: User Interface Design September 22 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

User eXperience. Don’t make me think  When you looking at a page that doesn’t make you think, all the thought balloons over your head say things like.

CS 235: User Interface Design October 8 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2.

Web Usability1. Goal : Your average user can use it without frustration. Usability guidelines:  Don’t make users think.  Avoid obscure messages. Web.

Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.

Jakob Nielsen’s “Top Ten Guidelines for Homepage Usability” Presented by Oyeniyi Ogunde

Don’t Make Me Think Author: Steve Krug Presentation by: Taina Castro Author: Steve Krug Presentation by: Taina Castro.

Dawn Pedersen American River College. What’s an Interface? The connection between a user and a machine. Interfaces provide complex information in a usable.

Web Page Design The Key to a Successful Web Page by Judy Bogdanets.

Don’t Make Me Think Steve Krug. Don’t Make Me Think What To Do & Not To Do:  Use short and to the point titles on links and buttons  Use links and buttons.

DON’T MAKE ME THINK Ryan O’Mara. Key Ideas  Navigation  Usability  User Tendencies  Design For Users  Testing  Navigation  Usability  User Tendencies.

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.

Reading Comprehension Strategies

Creating Website Content CS Programming Languages for Web Applications

Usability Testing and Web Design

Imran Hussain University of Management and Technology (UMT)

Web Programming– UFCFB Lecture-4

A Common Sense Approach to Web Usability By Steve Krug, 2000

Krug Chapter 3 Billboard Design 101 and Chapter 4 Mindless Choices

Homepage and taglines.

Don’t make me think Usability.

Where am I? Navigating a website: Browsing, searching, menus & breadcrumbs.

CMPE/SE 131 Software Engineering April 13 Class Meeting

DELIGHT WITH UX DESIGN RACHEL KORPELLA

Creating Website Content CS Programming Languages for Web Applications

Krug Chapter 2 How We Really Use the Web and Web Site Design

Krug Chapter 6 Street signs and Breadcrumbs

Usability 1.0 J. Richard Stevens.

Creating Website Content CS Programming Languages for Web Applications

Presentation transcript:

CS 174: Web Programming November 25 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Next Week’s Presentations  15-minute demos.  Explain what the app does.  Show the app in operation.  Describe what technologies you used. 2

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Next Week’s Presentations: Section 2 3 TeamDay AnonymousM AwesomeM Bits & BytesW Brute ForceM ChiW CTRL-AM Sparkly BubblesW The JAVSW

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Next Week’s Presentations: Section 4 4 TeamDay AlgorithmicsM BCGKW Creative CodersW Spot CheckersM Super DesignersM Team 76W The Hacking BadW ZettabyteM

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak A Good Book on Web Usability 5

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Definitions of Usability  Useful Does it do something people need done?  Learnable Can people figure out how to use it?  Memorable Do they have to relearn it each time they use it?  Effective Does it get the job done? 6

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Definitions of Usability, cont’d  Efficient Does it do it with a reasonable amount of time and effort?  Desirable Do people want it?  Delightful Is using it enjoyable, or even fun? 7 “A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth.” Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Don’t Make Me Think 8  You don’t want users to have to think about your page. Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Don’t Make Me Think, cont’d  Things should be immediately obvious. 9 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Don’t Make Me Think, cont’d  What is clickable? 10 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Don’t Make Me Think, cont’d  Booking a flight 11 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Users Don’t Read Pages  Users scan web pages. 12 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Users Scan Web Pages  Users use the web to get something done.  Users know they don’t have to read everything.  Scanning is a basic skill.  Therefore, it must be easy to find the key components of a web page.  Format pages to facilitate scanning. 13

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Users Scan Web Pages, cont’d 14 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Users “Satisfice”  Users don’t make optimal choices when looking for desired items on web pages.  Instead, users “satisfice” – they make the first reasonable choice. satisfice = a made-up word that combines “satisfy” + “suffice” 15

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Follow Conventions 16 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Follow Conventions, cont’d 17  Even if you don’t read Japanese, you can figure out what’s on this page. Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Create Effective Visual Hierarchies  The more important something is, the more prominent it should be. 18 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Create Effective Visual Hierarchies, cont’d  Things that are related logically should be related visually. 19 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Create Effective Visual Hierarchies, cont’d  Use nesting to show what is part of what. 20 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Create Effective Visual Hierarchies, cont’d 21 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Create Effective Visual Hierarchies, cont’d 22 WrongRight Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014  Break pages into clearly defined areas.

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Format Text to Support Scanning  Which would you rather scan? 23 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Format Text to Support Scanning, cont’d  Use headings that are well differentiated. 24 BadBetter Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Format Text to Support Scanning, cont’d  Don’t let headings “float”. 25 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Following the “Scent of Information”  Users don’t mind clicking a lot to find desired information on a website as long as: Each click is painless. They have continued confidence that they’re on the right track to finding their information “prey”. 26

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Avoid Showing Confusing Options  A confused user may decide it’s not worth it. 27 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Avoid Showing Confusing Options, cont’d  Display only relevant options. 28 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak The Home Page  What is the big picture?  What is this website about?  Users must be able to answer these questions within the first few seconds.  The first few seconds a user spends on a new website are critical. You must quickly get the main point across. 29

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak The Home Page, cont’d  Not every visitor to your website will start with the home page.  The user may actually start with some internal page after following a link.  Therefore, make it easy to return to the home page from every page. 30

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Web Navigation  “Search-dominant” users look for a search box as soon as they enter a site. In a physical store, they immediately look for a clerk. 31 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Web Navigation, cont’d  “Link-dominant” users want to browse first. They search only after running out of links or they’ve gotten sufficiently frustrated. 32 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Persistent Navigation  The set of navigation elements that appear on every page of a site. AKA global navigation 33 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Web Navigation Conventions 34 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Give Every Page a Name  The page name should be prominent. 35 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Use Page Names Consistently 36 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak “You are Here”  Make the current location stand out. 37 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak “You are Here”, cont’d  “Breadcrumbs” show you where you are and how you got there. 38 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Website Taglines  Good taglines are clear and informative and explain exactly what your website or your organization does. 39 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Website Taglines, cont’d  Good taglines are just long enough, but not too long. Six to eight words seem long enough to convey a full thought, but short enough to absorb easily. 40 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Website Taglines, cont’d  Good taglines convey differentiation and a clear benefit. A really good tagline is one that no one else in the world could use except you. 41 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Website Taglines, cont’d  Bad taglines sound generic. 42 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014

Computer Science Dept. Fall 2015November 25 CS 174: Web Programming © R. Mak Website Taglines, cont’d  Good taglines are personable, lively, and sometimes clever. Clever is good, but only if the cleverness helps convey—not obscure—the benefit. 43 Don’t Make Me Think, Revisited by Steve Krug New Riders, 2014