Usability Overview Upsorn Praphamontripong CS 4501-006 Design and Implementation of Software for the Web Fall 2016

Review: Web Applications http://www.virginia.edu/ Web server Web application Http Request Web component1 Web component2 Web componentn HttpServlet Request Web client DB HttpServlet Response Http Response CS 4501-006

Review: Web Applications Web server Web application Http Request Java servlets JSPs Usability Web component1 Web component2 Web componentn HttpServlet Request HTML JS CSS Web client DB HttpServlet Response Http Response CS 4501-006

CS 4501 - Overview 2 main aspects: User interface design and Software Usability: how to design UIs that is usable and appropriate to users Software Client side: HTML, JS, CSS Server side: Java servlet, JSP Other: Ajax, XML, JDBC Testing: Input validation CS 4501-006

Usability Overview Can I set time without looking at the manual? http://support.casio.com/storage/en/manual/pdf/EN/009/qw3252.pdf 36-pages manual Button #1 Button #2 Can I set time without looking at the manual? How about a stopwatch feature? Button #2 Button #4 Button #5 CS 4501-006

Do users look at web apps the way they are Do users look at web apps the way they are? Or do users look at web apps the way they think? Who? What tools? Add rosters? CS 4501-006

What Will You Learn About Usability ? How to break down the essential characteristics of usable software from an analytical viewpoint Engineering principles for designing and building software interfaces that are Fast to learn Speedy to use Avoid user errors How to recognize and articulate the difference between “this program sucks” and “I can improve this program by changing X,Y, and Z” Life-long habits for engineering usable products CS 4501-006

Usability Engineering This is a design class Engineers tend to focus on functionality But slick features are worthless if users cannot use them Making things complicated is easy. Making things simple is hard. CS 4501-006

Software Design Inside-out Outside-in Develop a system Then add the interface Outside-in Develop the interface Then build the system to support it Traditional computer science courses are almost entirely inside-out! When design decisions are made, either the developer must conform to the users, or the user must conform to the developer. Web sites sink or swim based on the usability CS 4501-006

Fundamental Software Design Principle The 7  2 Rule Human’s short term memory can only hold about seven things at a time (plus or minus 2) When we get more than about 7 items, we get confused CS 4501-006

Shneiderman’s Measurable Criteria User interface design has long been considered an art rather than a science That is, decisions have been made subjectively rather than objectively There has been a lot of effort to make UI design more objective – that is, an engineering activity This course will teach you some of that CS 4501-006

Shneiderman’s Measurable Criteria (2) Time to learn : The time it takes to learn some basic level of skills Speed of UI performance : Number of UI “interactions” it takes to accomplish tasks Rate of user errors : How often users make mistakes Retention of skills : How well users remember how to use the UI after not using for a time Subjective satisfaction : The lack of annoying features CS 4501-006

1. Time to learn With complicated Uis, the users must “plateau” additional commands Plateau 3 More tasks, more choices, or more speed additional commands Plateau 2 More tasks, more choices, or more speed Plateau 1 Ability to complete at least one simple task initial set of commands Well designed interfaces make the first plateau easy to get to subsequent plateaus clearly available CS 4501-006

2. Speed of UI Performance This is about navigating through the interface, not how fast the software or network runs Interaction points are places where the users interact with the software (e.g., buttons, text boxes, or commands) Speed of UI performance is roughly the number of interactions needed to accomplish a task Good UI designers need to reduce the number of keyboard-to-mouse switches CS 4501-006

3. Rate of User Errors Users will always make mistakes UIs can encourage or discourage mistakes Consistency, instructions, navigation, … Consider : Entering letter grades in a dropdown instead of radio buttons CS 4501-006

4. Retention of Skills “Once you learn to ride a bicycle, you never forget” Some interfaces are easy to remember, some are hard If they flow logically (that is, match the user’s mental model or expectations), they are very easy to remember If an interface is very easy to learn, then the retention is not important – users can just learn again Retention is typically more important with UIs that are hard to learn CS 4501-006

5. Subjective Satisfaction (SS) Subjective satisfaction is defined to be how much the users “like” the UI This depends on the user (thus the word “subjective”) Think of it in reverse: Users are unhappy when there is something annoying in the interface Blinking Ugly colors Spelling errors in masssages Most important in competitive software systems Like … everything on the Web ! CS 4501-006

Establishing Criteria Priorities Before designing, decide what is acceptable for each of the five criteria Order of priorities Minimally acceptable Optimistic goal CS 4501-006

Any Key CS 4501-006

Summary of New Concepts Usability engineering Goals for the class Design for the user “Outside-in” design 7  2 rule Five criteria : Learn, Speed, Errors, Skills, SS CS 4501-006