Designing a Graphical User Interface GUI

1
Designing a Graphical User Interface (GUI)

• Krisana Chinnasarn, Ph.D.
• January 2007.

2
Introduction

• How do you chooes the correct widget?
• How do you use the widget effectively?
• How do you combine widget?

3
Widget (n.)

• informal a small gadget or mechanical device.
• Computing a component of a user interface with a
  particular function.

4
Poor Interface Design
http//broken.typepad.com/
5
Poor Interface Design
http//broken.typepad.com/
6
Style Guide for GUIs

• http//msdn.microsoft.com/library/default.asp?url
  /library/en-us/dnwue/html/welcome.asp
• http//developer.apple.com/documentation/UserExper
  ience/Conceptual/OSXHIGuidelines/XHIGPartIII/chapt
  er_10_section_1.html
• http//developer.gnome.org/projects/gup/hig/1.0/

7
The Apperance of Widge in different pieces of
software

• Exercise 10 minute
• The affordance of button
• The use of color
• The shape of the button
• The position of button
• The wording of text inside the buttons

8
Energetic Sport Center
The task is to redesign the centers system for
recording membership data and booking match.
9
Energetic Sport Center

• Domain
• Wider domain is sport
• Particular application domain is the activities
  available at Energetic Sport Center and how the
  sport center handles these.

10
Energetic Sport Center

• User
• Administrative members of staff will record
  membership details.
• Most staff members work part time and rarely stay
  for more than a few months.
• 5 part time staff and a full time manager
• Administrative members of staff are mainly mature
  and have limit knowledge and experience of
  computing system.

11
Energetic Sport Center

• Main Tasks
• Task 1 Adding and Modifying Membership details,
  eg. Name, address, Date of Birth, First
  registration, activity,
• Task 2 Booking Squash Matchs, eg.
• Mon 6 March, Tue 7 March,
• 10-11 10-11
• 11-12 11-12
• 12-1pm 12-1pm

12
Energetic Sport Center

• Technology
• There will be a small network of computer.
• One computer will be at the Reception desk
• Other will be in the social area

13
Energetic Sport Center

• Conceptual Design
• Primary task objects Member, Booking
• Attribute
• Member Name, address, Date of Birth, sex,
  medical conition, drug allergies, First
  registration, length of membership, activity
  interested in.
• Booking Date, court number, name and membership
  number of person making the booking

14
Energetic Sport Center

• Conceptual Design
• Action
• Member Adding and Removing members
• Booking adding a new booking and Canceling a
  booking.
• Metaphor A form of the screen will be represent
  the membership form, and the booking diary will
  be represented by adiary metaphor.

15
Energetic Sport Center

• Conceptual Design
• Choice of Guidelines We have choosen to develop
  this UI broadly in line with the Microsoft Window
  User Experience Guidelines.
• http//msdn.microsoft.com/library/default.asp?url
  /library/en-us/dnwue/html/welcome.asp

16
Windows
17
Choosing Widgets to Structure the Interaction

• Using Primary Windows
• Using Secondary Windows
• Using Tabs

18
(No Transcript)
19
Choosing Widgets to Structure the Interaction

• Using Primary Windows contains a frame, title
  bar, menus, scroll bars, and so on.
• Using Secondary Windows complement primary
  windows, providing additional functionality and
  support for the user
• Message Box
• Dialog box

20
Choosing Widgets to Structure the Interaction

• Using Tab useful for classifying the properties
  of a task object represented by a window.
• Consideration
• Is the information on the different tabs
  independent?
• How many tab do you need?
• Do the tabs need to be completed in a specific
  order?

21
(No Transcript)
22
Exercise

• List the two primary windows needed for the
  Energetic sport center. Sketch an additional
  lunch pad window to choose between these.
• In the Energetic sport center, the membership
  primary window will display the details of one
  center member. How could this information be
  divided into more than one tab? You should
  consider the original membership form when you
  make this decision.

23
Choosing Widgets to Control the Interaction

• Using Menus
• Using Tool bars
• Using Command Buttons

24
Choosing Widgets to Control the Interaction

• Using Menus
• Drop-drown menus
• Cascading menus
• Roll-up menus
• Pop-up menus
• Considerations
• How do you name menu items?
• Do the menus allow the users to do what they want
  to do, but no more?
• How do you order the menu bar and menu items?

25
Exercise

• Draw a menu bar and associated drop-down menus
  for the membership window of the Energetic Sport
  Center. They should allow the user to perform the
  following tasks
• Search for particular member
• Print the details of the display member
• Add a new member
• Sort the member into a particular order
• List the member in a secondary window
• Delete an existing member from the membership
  list.

26
Choosing Widgets to Control the Interaction

• Using Tool Bars complement the menu hierarchy.
• They contain a range of frequently used commands
  represented by ICONs.
• The ICONs are often explained by ToolTips, small
  pop-up windows that contain the associated menu
  command.

27
Choosing Widgets to Control the Interaction

• Desirable properties of ICONs
• They can easily be distinguished from each other.
• They can easily be recognized and understood.
• They are visually simple.
• They are informative.
• They represent concrete object.
• They are eady to perceive.

28
Exercise

• Draw a tool bar for menu hierarchy, choosing two
  of menu items to be represented on the tool bar.
  How did you choose menu items to go on the tool
  bar? How did you design the ICONs?

29
Choosing Widgets to Control the Interaction

• Using Command Buttons used for controlling the
  operation of dialog box.
• Consideration
• How will you label them?
• How will you position them on the screen?
• What size should the button be?

30
Choosing Widgets to Enter Information

• Using Option Buttons and Check Boxes
• Using of List Boxes
• Using of Text Boxes

31
Choosing Widgets to Enter Information

• Using Option Buttons and Check Boxes
• Option Buttons are used when the user needs to
  choose ONE option out of the selection
• Check boxes are used when the user needs MORE
  than one option out of the selection.

32
Choosing Widgets to Enter Information

• Consideration
• How many options can you reasonable represent in
  this way?
• How should the options be grouped and laid out on
  the screen?
• How should they be ordered on the screen?
• How should the options be labeled?

33
Exercise

• For the Energetic Sport Center, draw the relevant
  parts of the general details and activity tabs,
  showing how option boxes and check boxes can be
  used to enter this information.

34
Choosing Widgets to Enter Information

• Using of List Boxes allow the user to choose
  from a large number of options.
• Consideration
• How many options should be display?
• How much space is available?
• Are the options likely to change?
• Are multiple selections needed?
• What default values should be used?

35
Choosing Widgets to Enter Information

• Using of Text Boxes
• Consideration
• What size and shape should the text box be?
• Do you know how much information the user wants
  to enter?
• Will you want to gray out the text box?

36
Combining GUI Widget

• If you have two possible designs, which is
  better?
• How would you put together a sequence of the
  screens to complete a task for the user?
• How would you extend your design to incorporate
  new features?

37
User Interface Designs

• Display Things to the User
• Capture Things from the User
• Navigate
• Considerations on the Panel Layout

38
Display Things to the User

• Display a little text
• Display a lot of text
• Display a list of objects
• Display a hierarchical list of objects
• Display a warning, confirmation, or other brief
  message that presents a limited variety of
  actions

39
Display a little text

• This can easily be accomplished by simply
  displaying the text anywhere on the panel. Often
  it is accompanied by an icon of some sort to
  associate the text with a function or physical
  object.

40
Display a lot of text
41
Display a list of objects
42
Display a hierarchical list of objects
43
Display a warning, confirmation, or other brief
message that presents a limited variety of
actions
44
Capture Things from the User

• Capture a little text
• Capture a lot of text
• Toggle settings on/off
• Capture a single selection from pre-defined
  choices
• Capture multiple selections from pre-defined
  choices
• Capture an approximate value from a wide range
• Increment or decrement a value
• Add/Remove an element to/from a list

45
Capture a little text
46
Capture a lot of text
47
Toggle settings on/off
48
Capture a single selection from pre-defined
choices
49
Capture a single selection from pre-defined
choices
50
Capture multiple selections from pre-defined
choices
51
Capture an approximate value from a wide range
52
Increment or decrement a value
53
Add/Remove an element to/from a list
54
Prevention Design
55
Forgiveness

• Consider the example when the user closes a
  document that contains changes that have not been
  saved.
• It can be very misleading to have a message that
  says "Continue without saving?" and a default
  button labeled "Okay."
• It is much better to have a dialog that says
  "Document has been changed" and a default button
  labeled "Save", with a "Don't save" button to
  allow the user not to save changes if that is, in
  fact, the desired action.