designing a graphical user interface gui n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Designing a Graphical User Interface (GUI) PowerPoint Presentation
Download Presentation
Designing a Graphical User Interface (GUI)

Loading in 2 Seconds...

play fullscreen
1 / 55

Designing a Graphical User Interface (GUI) - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

Designing a Graphical User Interface (GUI). Krisana Chinnasarn, Ph.D. January 2007. Introduction. How do you chooes the correct widget? How do you use the widget effectively? How do you combine widget?. W idget (n.). informal a small gadget or mechanical device.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Designing a Graphical User Interface (GUI)


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
designing a graphical user interface gui

Designing a Graphical User Interface (GUI)

Krisana Chinnasarn, Ph.D.

January 2007.

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

Dept. of Computer Science, Burapha University.

w idget n
Widget (n.)
  • informal a small gadget or mechanical device.
  • Computing a component of a user interface with a particular function.

Dept. of Computer Science, Burapha University.

poor interface design
Poor Interface Design

http://broken.typepad.com/

Dept. of Computer Science, Burapha University.

poor interface design1
Poor Interface Design

http://broken.typepad.com/

Dept. of Computer Science, Burapha University.

style guide for guis
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/

Dept. of Computer Science, Burapha University.

the apperance of widge in different pieces of software
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

Dept. of Computer Science, Burapha University.

energetic sport center
Energetic Sport Center

The task is to redesign the center’s system for recording membership data

and booking match.

Dept. of Computer Science, Burapha University.

energetic sport center1
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.

Dept. of Computer Science, Burapha University.

energetic sport center2
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.

Dept. of Computer Science, Burapha University.

energetic sport center3
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 ………………………

Dept. of Computer Science, Burapha University.

energetic sport center4
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

Dept. of Computer Science, Burapha University.

energetic sport center5
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

Dept. of Computer Science, Burapha University.

energetic sport center6
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.

Dept. of Computer Science, Burapha University.

energetic sport center7
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

Dept. of Computer Science, Burapha University.

windows
Windows

Dept. of Computer Science, Burapha University.

choosing widgets to structure the interaction
Choosing Widgets to Structure the Interaction
  • Using Primary Windows:
  • Using Secondary Windows:
  • Using Tabs:

Dept. of Computer Science, Burapha University.

choosing widgets to structure the interaction1
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

Dept. of Computer Science, Burapha University.

choosing widgets to structure the interaction2
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?

Dept. of Computer Science, Burapha University.

exercise
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.

Dept. of Computer Science, Burapha University.

choosing widgets to control the interaction
Choosing Widgets to Control the Interaction
  • Using Menus
  • Using Tool bars
  • Using Command Buttons

Dept. of Computer Science, Burapha University.

choosing widgets to control the interaction1
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?

Dept. of Computer Science, Burapha University.

exercise1
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.

Dept. of Computer Science, Burapha University.

choosing widgets to control the interaction2
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.

Dept. of Computer Science, Burapha University.

choosing widgets to control the interaction3
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.

Dept. of Computer Science, Burapha University.

exercise2
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?

Dept. of Computer Science, Burapha University.

choosing widgets to control the interaction4
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?

Dept. of Computer Science, Burapha University.

choosing widgets to enter information
Choosing Widgets to Enter Information
  • Using Option Buttons and Check Boxes
  • Using of List Boxes
  • Using of Text Boxes

Dept. of Computer Science, Burapha University.

choosing widgets to enter information1
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.

Dept. of Computer Science, Burapha University.

choosing widgets to enter information2
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?

Dept. of Computer Science, Burapha University.

exercise3
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.

Dept. of Computer Science, Burapha University.

choosing widgets to enter information3
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?

Dept. of Computer Science, Burapha University.

choosing widgets to enter information4
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?

Dept. of Computer Science, Burapha University.

combining gui widget
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?

Dept. of Computer Science, Burapha University.

user interface designs
User Interface Designs
  • Display Things to the User
  • Capture Things from the User
  • Navigate
  • Considerations on the Panel Layout

Dept. of Computer Science, Burapha University.

display things to the user
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

Dept. of Computer Science, Burapha University.

display a little text
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.

Dept. of Computer Science, Burapha University.

display a lot of text
Display a lot of text

Dept. of Computer Science, Burapha University.

display a list of objects
Display a list of objects

Dept. of Computer Science, Burapha University.

display a hierarchical list of objects
Display a hierarchical list of objects

Dept. of Computer Science, Burapha University.

display a warning confirmation or other brief message that presents a limited variety of actions
Display a warning, confirmation, or other brief message that presents a limited variety of actions

Dept. of Computer Science, Burapha University.

capture things from the user
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

Dept. of Computer Science, Burapha University.

capture a little text
Capture a little text

Dept. of Computer Science, Burapha University.

capture a lot of text
Capture a lot of text

Dept. of Computer Science, Burapha University.

toggle settings on off
Toggle settings on/off

Dept. of Computer Science, Burapha University.

capture a single selection from pre defined choices
Capture a single selection from pre-defined choices

Dept. of Computer Science, Burapha University.

capture a single selection from pre defined choices1
Capture a single selection from pre-defined choices

Dept. of Computer Science, Burapha University.

capture multiple selections from pre defined choices
Capture multiple selections from pre-defined choices

Dept. of Computer Science, Burapha University.

capture an approximate value from a wide range
Capture an approximate value from a wide range

Dept. of Computer Science, Burapha University.

increment or decrement a value
Increment or decrement a value

Dept. of Computer Science, Burapha University.

add remove an element to from a list
Add/Remove an element to/from a list

Dept. of Computer Science, Burapha University.

prevention design
PreventionDesign

Dept. of Computer Science, Burapha University.

forgiveness
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.

Dept. of Computer Science, Burapha University.