USER INTERFACE DESIGN

1
USER INTERFACE DESIGN

• Separating the Good from the Bad
• Tanner Shamrock

2
WHAT IS USER INTERFACE DESIGN?AN INTRODUCTION

• User interface design or user interface
  engineering is the design of computers, gadgets,
  appliances, machines, mobile communication
  devices, software applications, and websites with
  the focus on the user's experience and
  interaction.
• It is both a science and an art.

3
PURPOSE OF EFFECTIVE DESIGNA BUSINESS APPROACH

• Unlike traditional design where the goal is to
  make the object or application physically
  attractive, the goal of user interface design is
  to make the user's interaction experience as
  simple and intuitive as possible.
• Instead of beautiful and flashy, we would like
  simple and effective.
• Customers would rather have an ugly application
  that is easy to use than a fancy application that
  is confusing.

4
WHY DO WE NEED A GOOD DESIGN?A BUSINESS APPROACH

• Money
• Customer Satisfaction
• Maintain Competitive Advantage
• Increase Perceived Value of Organization

5
USABILITY PROBLEMSEXAMPLES

• Using 7 separate screens to fill in 10 fields.
• Misleading terminology or overly advanced and
  confusing jargon.
• The user thinks that they have saved the
  information, but didnt see the hidden update
  button.
• Not having a confirmation page, so person doesnt
  know if submission was successful.
• Not having an option to sort an inventory.
• Too many option choices making it difficult to
  find a simple solution.

6
WHAT MAKES A SUCCESSFUL DESIGN?AN INTRODUCTION

• Structure Design should be clear and meaningful
  by grouping related items in an easy to
  understand manner.
• Simplicity Create basic, easy to use tasks and
  develop shortcuts for longer tasks.
• Visibility Keep most important tools visible
  without distracting from the main purpose.
• Feedback Keep users informed of changes, errors,
  or actions that are relevant to them in easy to
  understand language.
• Tolerance Should be flexible with minimized risk
  of error or misuse.
• Reusability Maintain consistency between
  internal and external components to prevent
  confusion.

7
GOOD AND BAD DESIGN EXAMPLES

• Good UID

• Bad UID

Tons of rarely used menu items taking up highly
important workspace
Clean, elegant, professional, simple, easy to
use. A great interface design!
8
COSTS/BENEFITS OF GOOD DESIGN
9
USER INTERFACE DESIGN PROCESS6 ESSENTIAL STEPS

• Functionality Requirements Gathering
• User Analysis
• Information Architecture
• Prototyping
• Usability Testing
• Graphic Interface Design

10
STEP 1 REQUIREMENTS GATHERINGHOTEL RECEPTION
SOFTWARE EXAMPLE

• Decide on all of the required tasks that the
  software will perform to accomplish the users
  goals.

Ex. Hotel Reservations Software
Tasks Involved Book Guest Check in Check
Out Change Room Process CC Etc.
Data Required Guest Info Room Info Hotel
Info Services Info Etc.
What is the BEST and MOST EFFICIENT way to
convert this raw data into a user interface that
average people could use on an everyday basis
without too much frustration?
11
STEP 1 REQUIREMENTS GATHERINGHOTEL RECEPTION
SOFTWARE EXAMPLE

• What are the appropriate relationships between
  all of the data available?

12
STEP 2 USER ANALYSISAN INTRODUCTION

• Analyzing the types of potential users that might
  actively use the system once it is complete.
• User Analysis is the most vital step in the
  success of a piece of software.
• Unhappy users No money
• Unhappy users gives competitors an opportunity to
  usurp the market for your product by creating
  something better.

13
STEP 2 USER ANALYSISQUESTIONS TO ASK

• What does the user want the system to do?
• How would the system fit into the users daily
  workflow?
• How computer savvy is the user?
• What other programs does the user currently use?
• What look/feel appeals to the users taste?

14
STEP 2 USER ANALYSISHOTEL RECEPTION SOFTWARE
EXAMPLE

• Customers Hotel companies who will install their
  software throughout their organizations.
• Main Users Front-desk workers that will enter
  customer information into the system.
• Secondary Users Managers, customer service reps,
  marketing reps, communication reps, accountants,
  etc.

15
STEP 2 USER ANALYSISHOTEL RECEPTION SOFTWARE
EXAMPLE

• Give surveys.
• Ask for suggestions for current system.
• Watch as users use other software tools.
• Ask about what they want in the new system.
• Use the above information to create guidelines
  and standards for how the new user interface will
  be designed and implemented.

16
STEP 3 INFORMATION ARCHITECTUREAN INTRODUCTION

• Creating a flow of processes through the entire
  system.
• Drawing the flow of information as a person uses
  the tool from start to finish.
• Represents a hierarchy of content or a flowchart
  of processes.
• Used to create a sense of commonality throughout
  a system.
• Ex. A sitemap for a website.
• Ex. A decision tree for a phone tree system.

17
STEP 3 INFORMATION ARCHITECTUREHOTEL RECEPTION
SOFTWARE EXAMPLE
Customer Booking
Admin Functions
Customer Modification
Hotel Services
Enter Info
Edit Info
Order Room Service
Record Modifications
Choose a Room
Change Room
Add Services
Pricing Structure
Payment Processing
Change Prices
Remove Services
Data Analysis
Check in
Etc.
18
STEP 4 PROTOTYPINGAN INTRODUCTION

• Prototyping is the process of quickly putting
  together a working model in order to test various
  aspects of a design, illustrate ideas or features
  and gather early user feedback.
• Prototyping is an integral part of the design
  process in that it reduces cost and risk.
• Could be designed with programs, such as Visual
  Basic.
• Was created on paper in the past and cut out to
  represent design elements that could be mixed and
  matched.

19
STEP 4 PROTOTYPINGTHE ADVANTAGES

• Prototypes can be easily changed.
• May provide a proof of concept to help receive
  funding.
• Gives look at the final system.
• High user satisfaction.
• Encourages active participation between users and
  producers.
• Cost effective.
• Increases development speed.

20
STEP 4 PROTOTYPINGEXAMPLES OF PAPER PROTOTYPING

• Paper prototyping is the most basic form of
  prototyping.

21
STEP 4 PROTOTYPINGHOTEL RECEPTION EXAMPLE
22
STEP 5 USABILITY TESTINGAN INTRODUCTION

• Usability testing is a means for measuring how
  well people can use some human-made object (such
  as a web page, a computer interface, a document,
  or a device) for its intended purpose.
• Users speak aloud about their thoughts on certain
  functionality, while using the software.
• Basically, to learn about the positives/negatives/
  what needs to change with the software.
• Usability testing is vital.

23
STEP 5 USABILITY TESTINGGUIDELINES FOR TESTING

• Time on Task How long does it take a user to
  complete a certain task (ex. Booking a room,
  ordering room service, etc)
• Accuracy How many mistakes were made? Were
  they vital or minor?
• Recall How much does the user remember after
  they are finished of after period of time.
• Emotional Response How does the person feel
  about the completed tasks? Stressed / Complacent
  / Satisfied?
• 5 people or less is sufficient for testing.

24
STEP 6 GRAPHICAL USER INTERFACEAN INTRODUCTION

• The actual look and feel of the final graphical
  user interface (GUI) is created based on the
  findings developed during the usability testing.
• Typically performed by separate graphic artist,
  specializing in GUI creation.
• This is the final product.

25
STEP 6 GRAPHICAL USER INTERFACEHOTEL RECEPTION
EXAMPLE
26
STEP 6 GRAPHICAL USER INTERFACEREAL WORLD
EXAMPLES
27
STEP 6 GRAPHICAL USER INTERFACEREAL WORLD
EXAMPLES
28
STEP 6 GRAPHICAL USER INTERFACEREAL WORLD
EXAMPLES
29
STEP 6 GRAPHICAL USER INTERFACEREAL WORLD
EXAMPLES
30
USER INTERFACE DESIGN AS RELATED TO OBJECT
ORIENTED

• Virtual Windows Individual GUI components that
  represent a specific piece of data (ex. window to
  enter CUSTOMER info) could possibly represent OOD
  classes.
• Functions Actions performed within the windows
  could be represented as OOD methods for the
  classes.
• Final Screens New objects that could represent
  inheritance from previous windows.
• Buttons/Text Fields/etc Representing OOD
  objects that have methods performed on them.

31
USER INTERFACE DESIGN

• Any Questions/Concerns?

32
REFERENCES

• http//en.wikipedia.org/wiki/User_interface_design
  
• http//www.uie.com/articles/preventing_usability_p
  roblems/
• http//www.digital-web.com/articles/user_interface
  _design_taking_the_good_with_the_bad/
• http//www.sapdesignguild.org/community/design/gol
  den_rules.asp
• http//www.sylvantech.com/talin/projects/ui_desig
  n.html
• http//www.itu.dk/slauesen/SorenUID.html
• http//www.ambysoft.com/essays/userInterfaceDesign
  .html
• http//www.joelonsoftware.com/uibook/fog0000000249
  .html
• http//hcibib.org/tcuid/chap-5.html
• http//www.asktog.com/basics/firstPrinciples.html
• http//aralbalkan.com/687
• http//www.classicsys.com/css06/cfm/article_1995_1
  0.cfm
• http//toastytech.com/guis/osx14.html