![Page 1: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/1.jpg)
Designing a Graphical Designing a Graphical User Interface (GUI)User Interface (GUI)Designing a Graphical Designing a Graphical User Interface (GUI)User Interface (GUI)
Krisana Chinnasarn, Ph.D.Krisana Chinnasarn, Ph.D.January 2007.January 2007.
![Page 2: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/2.jpg)
Dept. of Computer Science, Burapha University.
Introduction• How do you chooes the correct
widget?• How do you use the widget
effectively?• How do you combine widget?
![Page 3: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/3.jpg)
Dept. of Computer Science, Burapha University.
W idget (n.)• informal a small gadget or mecha
nical device.• Computing a component of a user
interface with a particular function.
![Page 4: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/4.jpg)
Dept. of Computer Science, Burapha University.
Poor Interface Design
http://broken.typepad.com/
![Page 5: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/5.jpg)
Dept. of Computer Science, Burapha University.
Poor Interface Design
http://broken.typepad.com/
![Page 6: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/6.jpg)
Dept. of Computer Science, Burapha University.
Style Guide for GUIs• http://msdn.microsoft.com/library/
default.asp?url=/library/en-us/dnwue/html/welcome.asp
• http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGPartIII/chapter_10_section_1.html
• http://developer.gnome.org/projects/gup/hig/1.0/
![Page 7: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/7.jpg)
Dept. of Computer Science, Burapha University.
The Apperance of Widge in different pieces of softwareExercise 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
![Page 8: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/8.jpg)
Dept. of Computer Science, Burapha University.
Energetic Sport Center
SquashCourt I
SquashCourt II
Main Hall
Office
Fitness
Reception
The task is to redesign the center’s system for recording membership dataand booking match.
![Page 9: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/9.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 10: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/10.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 11: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/11.jpg)
Dept. of Computer Science, Burapha University.
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 ………………………
![Page 12: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/12.jpg)
Dept. of Computer Science, Burapha University.
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
![Page 13: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/13.jpg)
Dept. of Computer Science, Burapha University.
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
![Page 14: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/14.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 15: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/15.jpg)
Dept. of Computer Science, Burapha University.
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
![Page 16: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/16.jpg)
Dept. of Computer Science, Burapha University.
Windows
![Page 17: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/17.jpg)
Dept. of Computer Science, Burapha University.
Choosing Widgets to Structure the Interaction• Using Primary Windows:• Using Secondary Windows:• Using Tabs:
![Page 18: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/18.jpg)
Dept. of Computer Science, Burapha University.
![Page 19: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/19.jpg)
Dept. of Computer Science, Burapha University.
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
![Page 20: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/20.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 21: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/21.jpg)
Dept. of Computer Science, Burapha University.
![Page 22: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/22.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 23: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/23.jpg)
Dept. of Computer Science, Burapha University.
Choosing Widgets to Control the Interaction• Using Menus• Using Tool bars• Using Command
Buttons
![Page 24: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/24.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 25: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/25.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 26: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/26.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 27: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/27.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 28: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/28.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 29: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/29.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 30: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/30.jpg)
Dept. of Computer Science, Burapha University.
Choosing Widgets to Enter Information• Using Option
Buttons and Check Boxes
• Using of List Boxes
• Using of Text Boxes
![Page 31: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/31.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 32: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/32.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 33: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/33.jpg)
Dept. of Computer Science, Burapha University.
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.
![Page 34: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/34.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 35: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/35.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 36: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/36.jpg)
Dept. of Computer Science, Burapha University.
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?
![Page 37: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/37.jpg)
Dept. of Computer Science, Burapha University.
User Interface Designs• Display Things to the User• Capture Things from the User• Navigate• Considerations on the Panel Layout
![Page 38: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/38.jpg)
Dept. of Computer Science, Burapha University.
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
![Page 39: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/39.jpg)
Dept. of Computer Science, Burapha University.
Display a little text• This can easily be
accomplished by simply displaying
the text anywhere on the panel. Ofte
n it is accompanie d by an icon of so
me sort to associa te the text with a f
unction or physica l object.
![Page 40: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/40.jpg)
Dept. of Computer Science, Burapha University.
Display a lot of text
![Page 41: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/41.jpg)
Dept. of Computer Science, Burapha University.
Display a list of objects
![Page 42: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/42.jpg)
Dept. of Computer Science, Burapha University.
Display a hierarchical list of objects
![Page 43: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/43.jpg)
Dept. of Computer Science, Burapha University.
Display a warning, confirmation, or other bri ef message that presents a limited variety o
f actions
![Page 44: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/44.jpg)
Dept. of Computer Science, Burapha University.
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 cho
ices• - Capture multiple selections from pre defined c
hoices• Capture an approximate value from a wide ran
ge• Increment or decrement a value• Add/Remove an element to/from a list
![Page 45: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/45.jpg)
Dept. of Computer Science, Burapha University.
Capture a little text
![Page 46: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/46.jpg)
Dept. of Computer Science, Burapha University.
Capture a lot of text
![Page 47: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/47.jpg)
Dept. of Computer Science, Burapha University.
Toggle settings on/off
![Page 48: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/48.jpg)
Dept. of Computer Science, Burapha University.
Capture a single selection - from pre defined choices
![Page 49: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/49.jpg)
Dept. of Computer Science, Burapha University.
Capture a single selecti - on from pre defined cho
ices
![Page 50: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/50.jpg)
Dept. of Computer Science, Burapha University.
Capture multiple selectio - ns from pre defined choic es
![Page 51: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/51.jpg)
Dept. of Computer Science, Burapha University.
Capture an approximat e value from a wide ran
ge
![Page 52: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/52.jpg)
Dept. of Computer Science, Burapha University.
Increment or decremen t a value
![Page 53: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/53.jpg)
Dept. of Computer Science, Burapha University.
Add/Remove an elemen t to/from a list
![Page 54: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/54.jpg)
Dept. of Computer Science, Burapha University.
Prevention Design
![Page 55: Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007](https://reader036.vdocument.in/reader036/viewer/2022062322/56649e6b5503460f94b6972a/html5/thumbnails/55.jpg)
Dept. of Computer Science, Burapha University.
Forgiveness• Consider the example whe
n the user closes a docume nt that contains changes th at have not been saved.
• It can be very misleading to have a message that says "
Continue without saving?" and a default button labele
d "Okay."• It is much better to have a
dialog that says "Document has been changed" and a d
efault button labeled "Save ", with a "Don't save" butto n to allow the user not to sa
ve changes if that is, in fact , the desired action.