User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf ·...

43
SWEN-261 Introduction to Software Engineering Department of Software Engineering Rochester Institute of Technology User Interface - Hall of Shame

Transcript of User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf ·...

Page 1: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

SWEN-261Introduction to Software Engineering

Department of Software EngineeringRochester Institute of Technology

User Interface - Hall of Shame

Page 2: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Contempt & Loathing

Page 3: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Don’t Insult Users

Page 4: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Don’t Shout at Users!!!!

•There is no need for exclamation points!!!

•Buttons are already commands!!!

Page 5: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

DON’T USE ALL UPPER CASE

•Upper case is hard to read

•Reader’s get clues from vertical outlines

Page 6: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Users Aren’t Fools

Page 7: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Sowing Confusion

Page 8: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Delete Files To Delete Files?

Page 9: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

What Do Icon’s Mean?

Page 10: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Failure = Success?

Page 11: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Success = Error?

Page 12: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Is This An Error - Or Is It Normal?

Page 13: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Misleading Messages

•Really: too many directories for “Find”

•Do we really want to delete files?

Page 14: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Avoid “Geek Speak”

Page 15: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Know the User’s Level

•From Dr. Seuss’s ABCs

•Target audience: 3-5 year olds

•Works find on standard displays

Page 16: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Speak to the User

Page 17: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

The Geek World of Colors

•Quick: What is the 24-bit code for orange?

•Why not show the color pallette?

Page 18: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Label Buttons Appropriately

Why not “Yes” and “No” as button labels?

Page 19: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Ambiguity - What Would You Do?

Page 20: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Useless Output

Page 21: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Uninformative Messages

Page 22: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

My Favorite Outlook Diagnostic

Page 23: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

VB Message - 1

Page 24: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

VB Message - 2

Page 25: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Use The Correct UI Control

Page 26: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Check Boxes vs. Option Boxes

•What is a superscript/subscript?

•Triumph of graphic design over usability

•Use check boxes for non-exclusive options

•Use options (radios) for exclusive options

Page 27: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Confusing Buttons & Labels

Page 28: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

The Ultimate Social Security Entry Control

Page 29: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Just Plain Annoying

Page 30: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Can’t Save Empty File (Notepad)

•Why can’t you save an empty file?

•You can create an empty file via Explorer!

Page 31: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

An AI Triumph - Spell Check

Page 32: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 33: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Extras

Page 34: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 35: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 36: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Right at Home

Page 37: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 38: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 39: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 40: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering
Page 41: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Fun Errors

Page 42: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Fun Errors

Page 43: User Interface Hall of Shame - Software Engineering at RITswen-261/slides/UI Hall of Shame.pdf · SWEN-261 Introduction to Software Engineering Department of Software Engineering

Lessons Learned

•The error message should be in the users’ words

• Simple

• Not geeky

• Suggest a solution

•The UI should be consistent

•If you can make the users smile, let’em be