CSE 8316 User Interface Design Rob Oshana Southern Methodist University.
-
Upload
cameron-williamson -
Category
Documents
-
view
219 -
download
1
Transcript of CSE 8316 User Interface Design Rob Oshana Southern Methodist University.
![Page 1: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/1.jpg)
CSE 8316User
InterfaceDesign
Rob OshanaSouthernMethodistUniversity
![Page 2: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/2.jpg)
Interaction Styles
![Page 3: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/3.jpg)
Agenda• Windows
• Files
• Storage and Retrieval Systems
• Menus
• Forms
• Dialog boxes
• Typed command languages
![Page 4: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/4.jpg)
Introduction
• Interaction Style: A collection of interface objects and associated techniques from which the designer chooses
• Provide behavioral view for user communication
• These objects are implemented with widgets/toolkits
• This implementation falls in the constructional domain
![Page 5: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/5.jpg)
Steps to good GUI design
1. Know your client
2. Understand the business function
3. Understand the principles of good screen design
4. Develop system menus and navigation schemes
5. Select the proper kinds of windows
![Page 6: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/6.jpg)
Steps to good GUI design
• 6. Select the proper device based controls
• 7. Choose the proper screen based controls
• 8. Write clear text and messages
• 9. Provide effective feedback and guidance and assistance
![Page 7: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/7.jpg)
Steps to good GUI design
• 10. Provide effective internationalization and accessibility
• 11. Create meaningful graphics, icons, and images
• 12. Choose proper colors• 13. Organize and layout windows and
pages• 14. Test, test, and retest
![Page 8: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/8.jpg)
Windows
![Page 9: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/9.jpg)
History
• Xerox PARC - Apple Mac
• Contributed many things–mouse– rectangular window– scrollbar– push button– desktop metaphor– pull down menus
![Page 10: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/10.jpg)
PARCs Principles
• Modes– confusing and frustrating
• Overlapping Windows–metaphor of overlapping sheets on desk
• Tiling–more than one application on the screen
![Page 11: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/11.jpg)
Description
• Window: Screen object that provides basis for other interaction objects
• All interaction occurs through the window
• Two types:– Primary: The first window for an application,
acts as ``parent'' for other windows – Secondary: Created from primary. Include
such objects as dialogue boxes
![Page 12: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/12.jpg)
Window Name
Control menubutton
Window borderTitle bar
Client area
Maximize buttonMinimize button
Window Name
Title bar
Client Area
Sizing grip
Close buttonWindow border Minimize buttonMaximize button
Standard window decorations
![Page 13: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/13.jpg)
Key:P = Primary windowD = Dialog windowM = Message window
= Interaction not allowed
= Interaction allowed
Modeless
P
D D
M
App A App B
P
D D
M
ApplicationModal P
D D
D D
M
App A App B
P
D D
D D
M
SystemModal
P
D D
D D
App A App B
P
D D
D D
M
D DD D
M
Interaction restrictions in modeless and modal windows
Interaction restrictions in modeless and modal windows
![Page 14: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/14.jpg)
Unnecessary Rooms
• Should not add windows to our program unless they have a special purpose that can’t or shouldn’t be served by existing windows
• A dialog box is another room. Have a reason to go there
• Build function controls into the window where they are used
![Page 15: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/15.jpg)
Necessary Rooms
• When providing a function out of the normal sequence of events, provide a special place to perform it
• Examine the users goals
• Don’t put every function in a dialog box
![Page 16: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/16.jpg)
Windows Pollution
• A gallon of oil won’t make a bicycle pedal itself
• No way to show the connections between lots of windows–modal dialogs don’t count; they always get
you back immediately to the point of departure
• Tools make it easy to make lots of windows and boxes
![Page 17: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/17.jpg)
Guidelines
• Don't overuse windows–Minimize window manipulation needed – Give user flexibility to move and resize – Tiled windows give better user
performance, but require more area
• Appearance and behavior of primary window should be consistent– Primary is user's home base
![Page 18: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/18.jpg)
• Use different windows for different independent tasks – Allows one-to-one mapping to be set up
in mental model – Completion of task equates to
completing window
Guidelines
![Page 19: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/19.jpg)
• Use different windows for different coordinated views of the same task – Permits examination from different
perspective or detail – All views should be updated uniformly
to prevent inconsistency between windows
Guidelines
![Page 20: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/20.jpg)
Files
![Page 21: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/21.jpg)
Tragedy of the file system
• Most difficult to understand
• Main memory and disk storage confusing
• Programs stored in two places at once
• Putting might on will; user might say no but will probably say yes
![Page 22: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/22.jpg)
Problems caused by disks
• Disks and files make users crazy
• Influence of the file system on the user interface is deep
• We still render the implementation model to the user
![Page 23: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/23.jpg)
Problems caused by disks
• Behavior characteristics applied based on real world metaphor– only one document– it belongs to the user
• Implementation model violates most of these
• Disk drive is the book shelf• Main memory represents the hands doing
the editing (copy is made!)
![Page 24: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/24.jpg)
Dispensing with the disk model
• “Put the book back on the shelf” instead of “Save changes”
• Structure commands according to the goals of the user instead of according to the needs of the operating system
• Change “file” to “document”
![Page 25: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/25.jpg)
Designing software with the proper model
• Treat documents as single instances instead of copies - unified file model
• Save automatically at intervals– countdown clock– noticeable delay– wait til the user stops typing to save
![Page 26: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/26.jpg)
Designing software with the proper model
• Closing
• Does not map well to unified model
• Required knowledge of file system
![Page 27: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/27.jpg)
Designing software with the proper model
• Rude error message for something that a user should be able to do
![Page 28: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/28.jpg)
Archiving
• No explicit function for making a copy of or archiving a file
• Must use the “save as” function
• Not very clear
• “Save as” dialog is the wrong tool for making and managing copies
![Page 29: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/29.jpg)
Unify the file model
• If the file system is going to show the user a file that cannot be changes because it is already in use, this should be indicated to the user– special color or icon
• Pull a hammer out of the toolbox only to look inside and find another hammer!!
![Page 30: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/30.jpg)
Document Management
• Goal directed functions– creating a copy of the document– creating a milestone copy of the document– naming and renaming the document– placing and repositioning the document– specifying a stored format for the document– reversing some changes– abandoning all changes
![Page 31: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/31.jpg)
How did we get here?
• From a user’s point of view, there is no reason for a disk to exist
• Advantages for the engineer;– disks are cheaper than solid state memory– once written to, disks don’t forget when
the power is off– disks provide a physical means of moving
information from one computer to another
![Page 32: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/32.jpg)
How did we get here?
• Drawbacks– slower than solid state memory– less reliable with many moving parts–more space and power– CPU needs help to access– processing more complex
• Mainly a cost issue
![Page 33: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/33.jpg)
Storage and Retrieval Systems
![Page 34: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/34.jpg)
Storage vs. Finding
• In the real world, storing and retrieving are linked
• Not so in the digital world
• Storage system; a tool for placing goods into a repository for safekeeping
– physical container– tools necessary to put objects in and take
them back out again
![Page 35: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/35.jpg)
Storage vs. Finding
• Retrieval system; method for finding goods in a repository– logical system that allows the goods to
be located according to some abstract value• name• position• aspect of contents
![Page 36: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/36.jpg)
Storage vs. Finding
• Real world retrieval indices– author– subject– title
• We ignore these in the computer world– where we put them– what we named them
![Page 37: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/37.jpg)
Storage vs. Finding
• Books can also be identified by– color– shape
• Location may change– bookshelf– coffee table– night stand
• We don’t find a book by referring to its contents!!
![Page 38: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/38.jpg)
Retrieval Methods
• Positional retrieval; remembering where you left it
• Identity retrieval; remembering its identifying name
• Associative retrieval; remembering some inherent quality of the document
![Page 39: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/39.jpg)
Indexing
• Libraries used Dewey Decimal system because names can be too disparate or insufficiently unique– good approach to storage
• Card catalog helps in retrieval
• Libraries provide three indices– author
– subject
– title
![Page 40: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/40.jpg)
Indexing
• Each index is associative– allows the user to find the book
according to an inherent property of the book other than its identifying number or its location on the shelf
• Retrieval is done by looking up one of the indices, find its number, find the row of books, examine signs
![Page 41: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/41.jpg)
Retrieval Systems in Computer
![Page 42: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/42.jpg)
Retrieval Systems in Computer
![Page 43: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/43.jpg)
An associative retrieval system
• Enables us to find documents by their contents
• Should know where documents can be found
• Create temporary or permanent groups of files
• Browse by synonym or related topic
• Assign attributes to files
![Page 44: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/44.jpg)
Things to remember
• The program that created the file
• The type of document
• The program that last opened the document
• If the document is very large or small
• If the document has been untouched for a long time
• The length of time the document was last open
![Page 45: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/45.jpg)
Getting Better
• SGML and XML
• OLE
• Unix standard file formats
![Page 46: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/46.jpg)
Menus
![Page 47: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/47.jpg)
Brief History
• Typing commands into a standard keyboard was once considered revolutionary
• Command line interface• Hard to know what to type• Still preferred today in some spaces• Modern complexity makes it hard to
use
![Page 48: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/48.jpg)
Brief History
• Hierarchical menu in the late 70’s• User could forget many of the
commands and option details• Read information of the screen
instead of keeping it in your head• Very sequential in nature due to
batch nature of computers at the time
![Page 49: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/49.jpg)
Example
• Enter transactions
• Close books for month
• Print income statement
• Print balance sheet
• Exit
![Page 50: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/50.jpg)
1. Enter Transactions
• Enter Invoices
• Enter payments
• Enter invoice corrections
• Enter payment corrections
• Exit
![Page 51: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/51.jpg)
Lotus 1-2-3• Revolutionary• Visible hierarchical menu• Took advantage of 1979 computer screens– 2000 characters/screen– 25 horizontal rows– 80 characters each
• Powerful because it enabled users to move in an ad hoc, piecemeal fashion, from beginner to expert
![Page 52: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/52.jpg)
Monocline grouping
• Method of organizing things into a single layer of groups– simple and powerful (users mental model)– the method we use at home/office– never exceeds a single level of nesting
• Most users don’t like hierarchies– in a file cabinet you don’t see folders within
folders
![Page 53: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/53.jpg)
Command types
• Command vector; each distinct technique for issuing instructions to a program
• Multiple command vectors - each function has– menu commands– toolbar commands– keyboard commands– direct manipulation commands
![Page 54: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/54.jpg)
Migrating commands
• Immediate vectors– direct manipulation; immediate affect on
the information without intermediary • menus and dialog boxes don’t have this
– toolbar-button command vectors– no delay between pressing a button and
seeing the results of the function
• Most frequently used commands migrate to buttons on the toolbar
![Page 55: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/55.jpg)
Menu commands
• Menu commands that have the advantage of natural language descriptions of the functions, and the detailed controls and data that appear on corresponding dialog boxes
• Menus and dialog boxes are the pedagogic vector
![Page 56: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/56.jpg)
Menus
• Hard to first understand what a complex application can do
• We look at the menu
• Similar to a restaurant menu that we view at the entrance to get a feel for type, price, setting, etc
![Page 57: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/57.jpg)
Menus must be complete
• Full selection of actions and facilities available in the program
• Hints that describe keyboard equivalents
![Page 58: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/58.jpg)
Example
![Page 59: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/59.jpg)
Description
• Menu: Object that provides a list of items from which one or more of the items are selected.
• One of the most popular, easiest to use interaction objects
• Promotes recognition over recall • Reduces typing errors • Wide assortment of styles
![Page 60: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/60.jpg)
Structures of menus
• Single menus
• Sequential menus
• Simultaneous menus
• Hierarchical menus
• Connected menus
![Page 61: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/61.jpg)
Single menus
• Single screen to seek input or request action to be performed
• Conceptually require choices from one menu only and no others will follow
• User only considers immediate consequences
• May be iterative – data entry
![Page 62: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/62.jpg)
Single menus
Galitz, Essential Guide to User Interface Design
![Page 63: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/63.jpg)
Sequential linear menus
• Presented in a series of screens possessing only one path
• Presented in preset order (may be problem if user wants a different order)
• Objective to specify parameters or for entering data
• Path may be short or long (long may become tedious)
• All important and require user action
![Page 64: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/64.jpg)
Sequential linear menu
Galitz, Essential Guide to User Interface Design
![Page 65: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/65.jpg)
Sequential linear menu
![Page 66: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/66.jpg)
Simultaneous menus
• Instead of being presented on separate screens, all menu options are available simultaneously
• Menu may be completed in order desired by user• Choices can be skipped and returned to later• Tedium associated with long series of sequential
menus greatly reduced• Large collections of alternatives can clutter
screen – paging or scrolling may be necessary• Important to clearly indicate menu choice
relationships and dependencies (this can be confusing if not done right)
![Page 67: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/67.jpg)
Simultaneous menus
Galitz, Essential Guide to User Interface Design
![Page 68: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/68.jpg)
Hierarchical Menus
• When many relationships exist between menu alternatives, and some menu options are only appropriate depending on a previous selection, a hierarchical structure is the best solution
• This approach provides an increasing refinement of choice as menus are stepped through– Options to suboptions– Categories to subcategories– Pages to sections to subsections
• Represent with an inverse tree
![Page 69: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/69.jpg)
Hierarchical Menu
Galitz, Essential Guide to User Interface Design
![Page 70: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/70.jpg)
Hierarchical Menus
• Examples are menu bars with pull-downs• Web sites with navigation links• Order and structure of branching in a
hierarchy is preset• Normal order of flow is one way top down• Branching order may not fit user
conception of the task flow• May go down wrong paths
![Page 71: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/71.jpg)
Connected menus
• Networks of menus interconnected in some manner
• Movement not restricted to a hierarchical tree – permitted between most or all menus in the network
• My be cyclical or acyclical (movement in only one direction)
• Gives user full control over navigation flow• For novice, complexity and navigation may
be daunting
![Page 72: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/72.jpg)
Connected menu
Galitz, Essential Guide to User Interface Design
![Page 73: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/73.jpg)
Event trapping menus
• Provide ever-present background of control over the system’s state and parameters while the user is working on a foreground task
• Serve three functions– Immediately change some parameter in the
current environment (bold text)– Take user out of current environment to
perform function (spell check)– Exit and allow user to go to new environment
(exit)
![Page 74: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/74.jpg)
Event trapping menus
Paste option will only function if there issomething in a clipboard to paste
![Page 75: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/75.jpg)
Suggested Menu Structure
Program Document Pieces Help
PropertiesViewsFunctionsAccess
PropertiesViewsFunctionsAccess
PropertiesViewsFunctionsAccess
![Page 76: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/76.jpg)
Suggested Menu Structure
• Far left is the topic of broadest scope (program)
• Move to the right with diminishing scope• Submenus in descending order of
importance– properties– views of them– functions that operate on them– access to the “outside world”
![Page 77: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/77.jpg)
Program Menus
• Default settings
• What templates are available
• What mode it is in
• Configuration of standard interface idioms like toolbars
• Personalization items like color and graphics
![Page 78: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/78.jpg)
Document menus
• Covers document under construction• Prime menu items cover properties of the
currently active document• Views (draft vs presentation)• Functions that operate on the entire
document at once– calculating spreadsheets– formatting text
• Most recently used information
![Page 79: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/79.jpg)
Pieces of the document
• Covers objects embedded in the document (tables or images)
• Only active when the particular object is selected
• Handles transformations like rotation, formatting
• Ability to load and save objects to/from other documents/disk
![Page 80: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/80.jpg)
File Menu
mnemonics
accelerators
separator
MRU list
![Page 81: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/81.jpg)
Pop up menu
• Used to present alternatives or choices within the context of the task
• Choices are context sensitive depending on where the pointer is positioned and when the request is made
![Page 82: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/82.jpg)
Pop up menu
• Advantages • Appear in working
area• Do not use window
space when not displayed
• No pointer movement needed if selected by button
• Vertical orientation efficient for scanning and grouping
• Disadvantages• Existence must be
learned and remembered
• Require a special action to see the menu
• Items are smaller than full size buttons which slows selection time
• Display locations may not be consistent
![Page 83: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/83.jpg)
Pop up menu guidelines
• Provide a pop-up menu for common, frequent, contextual tasks
• Items that cannot be chosen due to the current state of an application should not be displayed
• Continue to display pop-up until– Choice is selected– An action outside the pop-up is initiated– The user removes the pop-up
![Page 84: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/84.jpg)
Iconic menu
![Page 85: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/85.jpg)
Iconic menu
• Use to remind users of the functions, commands, attributes, or application choices available
• Create icons that– Help enhance recognition and hasten
option selection– Are concrete and meaningful– Clearly represent choices
![Page 86: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/86.jpg)
Iconic menu advantages/disadvantages
• Pictures help facilitate memory of applications
• Large size increases speed of selection• Pictures consume more screen space and
difficult to organize for scanning efficiently
• Creating meaningful icons requires special skills and extended time
![Page 87: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/87.jpg)
Menu System
• Standard menus– File menu– Edit menu– Windows menu– Help menu
• Optional menus– View menu– Insert menu– Setting menu– Format menu– Tools menu
![Page 88: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/88.jpg)
Types
• Push-Button Menus – Choices are in terms of push-buttons,
sometimes called a button bank – Typically one of the selections is the default
and is highlighted in some way – Selection may be based on pointer object or
keyboard accelerators – Articulatory feedback is given – Need to label carefully and clearly -- shortness
of label versus clarity of meaning
![Page 89: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/89.jpg)
Increase Scale Range Circle Range Radius
Push Buttons with Graphic and Text Labels
2X
Save Delete
Push Buttons with Text Labels
Options... Help
APush Buttons with Graphic Labels
Example push buttons with text labels, graphic labels,
or both
![Page 90: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/90.jpg)
Types• Radio-Button Menus – Choices are exhaustive and mutually
exclusive, selecting one deselects another – Selection indicated by highlighted box – Typical for dialogue or property boxes
• Check-Button Menus – Like a radio-button menu, but more than one
item may be selected – Selections indicated by highlighted box, check
mark, etc
![Page 91: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/91.jpg)
Menu Title_
Command
Dialog Window . . .
Submenu
Check Button 1
Check Button 2
Radio Button A
Radio Button B
Toggle On
Action
Routings
Settings(state toggles)
Settings(actiontoggle)
_
_
_
_
_
_
_
_
Examples of menu options in Motif
![Page 92: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/92.jpg)
Name
SIF/DI
Short Name
FOTC TN
Call Sign
_
_
_
_
_
Indicator Label
Example radio button in MS Windows
![Page 93: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/93.jpg)
Plain Text
Bold
Italic
Outline
Indicator Label
Example check box group in Motif
![Page 94: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/94.jpg)
TDAs_
Route . . .
Intercept . . .
CPA . . .
DR . . .
Sailplan On
Unavailable
option
_
_
__
_
Example of unavailable menu option in Motif
![Page 95: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/95.jpg)
Types
• Pull-Down Menu –Menu title is shown. When selected,
entire menu appears, selection is made and menu is hidden
– Since only title is permanent, provides compromise between pop-up and continuously displayed menus
– Selection may be done with one or more user actions
![Page 96: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/96.jpg)
Edit_
Clear
Undo_
Cut_
Copy_
Delete__
Paste_
Ctrl+Z
Ctrl+X
Ctrl+C
Ctrl+V
Menuoptions
Menutitle
Example pull-down menu in MS Windows
![Page 97: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/97.jpg)
Types
• Pop-Up Menus –Menu appears at location where mouse
is pressed – Unlike pull-down, there is no evidence
the menu exists – Contents may change depending on
location of cursor –Minimizes mouse movement and screen
real-estate
![Page 98: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/98.jpg)
xterm Workspace Object
Remove from Workspace
Open Parent Folder
Rename
_
_
_
xx Pop-up menu
Example pop-up menu in Motif
![Page 99: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/99.jpg)
Types• Option Menu – Appears much like a field in a form, but when
selected a menu appears – Distinct from pop-up since visual cue of
existence
• Toggle Menu – One choice is shown. – Clicking on item will sequence through all
possible choices – User is not presented with all choices at once
![Page 100: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/100.jpg)
Font: Helvetica Font:
Chicago
Courier
Geneva
Helvetica
Palatino
Times
Optionbutton Option
menu
Bargraphic
Label
Example option menu in Motif
![Page 101: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/101.jpg)
Edit
UndoCutCopyPasteClearDelete
Edit
Example menu button in Motif
![Page 102: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/102.jpg)
Types
• Cascading Menus – Like a pull-down, however selecting one
choice brings up another menu – Helps group into hierarchical fashion – Visual clue to existence should be
provided – Requires more coordination than other
styles
![Page 103: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/103.jpg)
Do this: Not this:
Organization of options in submenus
![Page 104: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/104.jpg)
Types
• Pie Menus – Choices arranged as wedges in circle –Minimizes mouse movement over linear
list – Other aspects (such as radius or wedge
size) can be used
![Page 105: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/105.jpg)
Types
• Palette/Iconic Menus –Menu consists of an array of icon push-
buttons. – Used for frequently chosen features or
in graphically oriented applications – Choice is indicated by highlighting icon
![Page 106: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/106.jpg)
Types
• Embedded Menus – Menu items are highlighted/underlined text – Selecting text performs action – Also called hypertext
• Dynamic Menus – Menu contents change over time – Sometimes done by graying out selection
items
![Page 107: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/107.jpg)
Map Options__
Predefined Maps . . .
World View
Recenter
Map Source
Map Intensity. . .
Map Manager . . .
Digital
WDBII
DTED
_
__
_
_
_
_
_
_
_
Submenu
Example submenu in Motif
![Page 108: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/108.jpg)
Help
Window Name
_File Edit View__ __ _ _ _ _ _ _ _ _ _ _ _ _ _
Clear
Undo_
Cut_Copy_
Delete__
Paste_
Ctrl+Z
Ctrl+X
Ctrl+C
Ctrl+V
Tear-off button
Example tear-off menu in Motif
![Page 109: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/109.jpg)
Help
Window Name
_File Edit View__ _
Undo
Cut
Copy
Paste
Clear
Delete
Ctrl+Z
Ctrl+X
Ctrl+C
Ctrl+V
Edit: Tear-off
_
_
_
_
_
_
Tear-offwindow
Example menu window in Motif
![Page 110: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/110.jpg)
Guidelines
• Use the user tasks and system functions to organize hierarchical menus – Goal is three to four levels with four to
eight items per level – Can place tasks on paper and organize
into hierarchy to aid design
• Use meaningful groupings of menu choices
![Page 111: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/111.jpg)
Guidelines
• Use meaningful ordering of menu choices – Orderings include alphabetical,
numerical or temporal, frequency – Not good to dynamically change
ordering
![Page 112: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/112.jpg)
Guidelines• Use brief descriptions for menu choices – Single word is best – Otherwise begin each choice with same type of
word (noun, verb, etc)
• Use a consistent layout across all menus and keep the screen uncluttered – Should be covered in customized style guide
![Page 113: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/113.jpg)
Guidelines
– Separate with white space, use consistent help messages
• Allow Shortcuts – Provide accelerator keys and macros
![Page 114: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/114.jpg)
Other Design Tips
• Disable menu items when they are moot
• Parallel visual symbols on parallel command vectors
• Don’t use bang menu items
![Page 115: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/115.jpg)
Parallel visual symbols
![Page 116: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/116.jpg)
Tips for Creating Good Accelerators
• Follow standards
• Provide for their daily use
• Show how to access them
![Page 117: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/117.jpg)
Forms
![Page 118: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/118.jpg)
Description
• A series of labeled fields that are to be filled in by the user
• Intuitive interface, however free form typing is more prone to errors
• Various types of fields for forms
![Page 119: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/119.jpg)
Field Types
• User-Typed Strings – Can have validated and invalidated – Validated fields should have some visual cue
• User Choices from a List – Toggle and option menus are good for this
situation
• Default Values for Fields – All fields for which values can be predefined
should have them
![Page 120: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/120.jpg)
Types of Fields
• Required vs. Optional Values – Should have visual cue as to which is
optional and which required
• Dependent Fields – These are fields that are required if a
particular value is entered in another field.
![Page 121: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/121.jpg)
Guidelines
• Use a consistent, visually appealing layout and content – Group fields and separate with white
space – Provide titles and concise instructions – Be consistent across different forms
![Page 122: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/122.jpg)
Guidelines
• Do not assume that existing paper forms convert directly to screen designs and a good user interface – Paper forms frequently are not optimal – Good opportunity to evaluate purpose of
forms, involving users – Screen size versus paper is different. – Attempting to copy the form directly, but
changing some aspects can be confusing
![Page 123: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/123.jpg)
Guidelines
• Use appropriate visual cues for fields on forms – Indicate maximum length, types of input
allowed, etc.
• Use familiar and consistent field labels and abbreviations – Field labels should be concise, using standard
terms – Labels should be located to the left of the field
with a simple delimiter
![Page 124: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/124.jpg)
Guidelines
• Use logical navigation among fields – Arrow keys, return key, tab – Permit wraparound or direct access using
mouse
• Use logical navigation within fields • Support editing and error correction of
fields – Do no require entire field be replaced, but
rather permit changing of single characters
![Page 125: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/125.jpg)
Guidelines
• Use consistent, informative error messages for unacceptable characters and values
• Provide explanatory messages for expected field inputs – Can be made available on user demand
or automatically provided. – If automatic, should be concise
![Page 126: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/126.jpg)
Guidelines
• Provide default values in fields whenever possible – Fill in obvious fields, allow user to change – Can help describe format for input
• Provide a completion indicator for each form-filling screen – Give user control over when finished – Permit cancellation and ability to return to
partially completed form
![Page 127: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/127.jpg)
Dialog Boxes
![Page 128: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/128.jpg)
Description
• A rectangular, delineated screen area that is used for messages, text entry, commands, selection and user control
• May be initiated by user or system
• Temporary object that obscures part of screen
![Page 129: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/129.jpg)
Suspension of Normal Interaction
• Dialog boxes are superimposed over the main window of the owning program
• Engages user by offering information and requesting some input
• After editing user has option of accepting or rejecting changes
• Dialog box then disappears
![Page 130: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/130.jpg)
Suspension of Normal Interaction
• When the application presents a dialog box, it is temporarily moving the action out of the mainstream
• Taking the focus off the dinner party and into the kitchen for preparation of the food
• May be crucial but not the main point• Should be use for secondary interaction
![Page 131: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/131.jpg)
Put primary action on the primary window
Dialogs break flow
![Page 132: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/132.jpg)
Dialogs break flow
• Appropriate for functions or actions out of the mainstream interaction
• Good for presenting infrequently used functions and settings
• Well suited for concentrating information related to a single subject
• Serve two masters; frequent users and infrequent user
![Page 133: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/133.jpg)
Dialog box basics
• All dialog boxes have an owner
• Always placed visually on top of the owning program
• Every dialog box has at least one terminating command– OK– Cancel
![Page 134: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/134.jpg)
Modal Dialog boxes
• Most common• Once the box comes up, the owning
program cannot continue until the dialog box is closed
• It stops the proceedings• User can activate other programs
while the modal dialog box is up– dialog box remains indefinately
![Page 135: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/135.jpg)
Modal Dialog boxes
• Easiest for users and designers to understand
• “Stop what you are doing and deal with me now! When you are done you can return to what you were doing”
• Like a subroutine call• Rigidly defined behavior
![Page 136: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/136.jpg)
Modal Dialog boxes
• Function-oriented; operates on the entire program or document
• Process- or property- oriented; operates on the current selection
• Application modal; can only stop their owning application
• System modal; brings every program in the system to a halt (catastrophic conditions only!)
![Page 137: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/137.jpg)
Modeless Dialog boxes
• Less common and more misunderstood
• Owning program continues to run without interruption
• Does not stop the proceedings
• Have terminating commands
• Scope of operation is often unclear
![Page 138: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/138.jpg)
Modal Dialog box design tips
• Visually differentiate modeless dialogs from modal dialogs
• Give modeless dialog boxes consistent terminating commands
• Never change the terminating button captions
• Things that behave differently should look different!
![Page 139: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/139.jpg)
Making modeless dialog boxes into toolbars
![Page 140: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/140.jpg)
Typical state-of-the-art modeless dialog box
![Page 141: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/141.jpg)
Property Dialog Box• Usually modal, but not uncommon to
find these modeless
![Page 142: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/142.jpg)
Function Dialog Box
• Usually summoned from the menu
• Most frequently modal dialog boxes
• Control a single function– printing– inserting– spell check
![Page 143: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/143.jpg)
Bulletin Dialog Box
• Most abused part of the interface• Error message box• Property and function dialog boxes are
intentionally requested by the user– they serve the user
• Bulletins are issued unilaterally by the program– they serve the program
![Page 144: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/144.jpg)
Bulletin Dialog Box
![Page 145: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/145.jpg)
Process Dialog Box
• Like bulletin in the sense that they are erected at the program’s discretion rather than users request
• Indicate that the program is busy with some internal function
• Alerts the user to the program’s inability to respond normally
• Warns the user not to be overcome with impatience
![Page 146: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/146.jpg)
Process Dialog Box
• Single CPU systems require this to some extent– good at time sharing between software
tasks– once the hardware becomes involved
problems arise• accessing the disk• dialing up a modem
![Page 147: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/147.jpg)
Process Dialog Box
![Page 148: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/148.jpg)
Process Dialog Boxes• The program must inform the user when it
gets stupid• Four basic tasks– make clear to the user that a time-consuming
process is happening– make clear to the user that things are
completely normal– make clear to the user how much more time
the process will take– provide a way for the user to cancel the
operation
![Page 149: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/149.jpg)
Process Dialog Boxes
• Process meter
![Page 150: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/150.jpg)
Types
• List Boxes – Scrollable sequence of users choices – Contents are usually dynamic – Frequently search cability exists
• Entry Boxes – Allows user to enter data – May be one line (as in form field) or multi-line – Supports full editing
![Page 151: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/151.jpg)
Airfields:
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
Label
List Box
Example list box in Motif
![Page 152: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/152.jpg)
Airfields:
Delhi
Dulles
Guam
Jakarta
Kuwait
London
Manila
Search for:
DE
Example list and text box used in an incremental
search in Motif
![Page 153: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/153.jpg)
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
ChicagoAirfields:ChicagoAirfields:
Label Textarea
Arrowbutton List
box
Example drop-down list box in Motif
![Page 154: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/154.jpg)
Airfields:
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
ChicagoLabel Text box
List box
Example combo box in Motif
![Page 155: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/155.jpg)
Chicago
Delhi
Guam
Jakarta
Kuwait
DuAirfields:ChicagoAirfields:
DullesLabel
List box
Text box
Arrowbutton
Example drop-down combo box in MS Windows
![Page 156: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/156.jpg)
Altitude (in feet):40000
LabelText area
Arrowbuttons
Example spin box in Motif
![Page 157: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/157.jpg)
Types
• Message Boxes – Usually created by system (not at user
request) – Contains information from user and
allows limited interaction
![Page 158: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/158.jpg)
Types
• Dialogue Boxes – Composite interaction object that contains
other interaction objects. – Typically part of user task sequence – Group various, related functions – Modal dialogues grab the user focus and
require the user to resolve before continuing – Modeless allows user to interact with other
window without finishing it
![Page 159: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/159.jpg)
Drafter/Title:
TEST.MSG
Label
Text Box
_
Example text box and label in MS Windows
![Page 160: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/160.jpg)
Date:
Distance:
Frequency:
SSN:
Miles
MHz
(YYYYMMDD)
Example text box labels providing format cues
![Page 161: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/161.jpg)
Guidelines• Use brief but comprehensible instructions – Because of potential complexity of boxes,
instructions should be provided
• Use carefully worded messages • Use logical groupings and orderings of
objects in a box • Use visual cues to delineate groupings
within boxes • Keep layout consistent and visually
appealing
![Page 162: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/162.jpg)
Guidelines
• Make defaults visually distinctive • Menu selections that lead to dialogue
boxes should contain a visual cue • Boxes should disappear under user
control – Windows that appear and disappear
``magically'' confuse the user – Exception is for boxes displaying status
information
![Page 163: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/163.jpg)
Scroll bar shaft
Scroll arrow
Scroll box
Scroll arrow
Split box
Components of a scroll bar in MS Windows
![Page 164: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/164.jpg)
SashSeparator
Example sash in Motif
![Page 165: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/165.jpg)
Font: Size:Style:Font
Times Regular 12
ArialGenevaHelveticaTimes
BoldItalicBold ItalicRegular
8101214
Alignment
ApplyCancelOK
Font Properties ?
Tab
Tabbedpage
Actionarea
Example tabbed pages in MS Windows
![Page 166: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/166.jpg)
Database Notification (Minutes):
0 60
10
Scale barIndicator
Label
Example scale in Motif
![Page 167: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/167.jpg)
Files remaining to be copied: 50
Reading: TEST50.DOC
Example gauge in Motif
![Page 168: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/168.jpg)
Dialog Box Etiquette
![Page 169: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/169.jpg)
Design Tips
• All dialog boxes should have caption bars
• Use verbs in function dialog caption bars
• Use object names in property dialog caption bars
• Dialog boxes should be as small as possible but no smaller
![Page 170: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/170.jpg)
Reduce Excise
![Page 171: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/171.jpg)
Terminating Commands for Modal Dialog Boxes
• Offer OK and CANCEL buttons on all modal dialog boxes– CANCEL good for pedagogical purposes– Bulletin dialog boxes (errors) can get away
with just an OK– Process dialogs need a CANCEL to stop a time
consuming process
• Never user terminating words in dialog boxes (CLOSE)
![Page 172: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/172.jpg)
The Close Box
• Don’t put close boxes on modal dialogs– disposition of changes is unclear– changes accepted or rejected?
![Page 173: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/173.jpg)
Tabbed Dialog
• Sometimes called “multi-pane” dialog• Panes and tabs• Helps with size and complexity• Follows the users mental model for how
things are stored– monocline grouping (one level deep)
• Content must have meaningful rational
![Page 174: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/174.jpg)
Tabbed Dialogs
Tabbed area
Un-tabbed area
Put terminating buttons in un-tabbed areaPut terminating buttons in un-tabbed area
![Page 175: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/175.jpg)
Extreme Case of Tabbed Dialogs
All idioms haveAll idioms havepractical limitspractical limits
Don’t stack tabsDon’t stack tabs
![Page 176: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/176.jpg)
Directed Dialogs
• Changes and adapts its suite of gizmos based on some user input
• Programming these can get complicated
• May be confusing to the user• Effective when user is entering
settings in a clearly sequenced manner
![Page 177: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/177.jpg)
Directed Dialogs
![Page 178: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/178.jpg)
Typed-Command Languages
![Page 179: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/179.jpg)
Description
• Earliest form of communication
• Can be very efficient to use, popular with frequent users
• Requires extensive training and knowledge of syntax
![Page 180: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/180.jpg)
Guidelines
• Use a consistent rule of formation for entering commands – Since learning is more difficult,
consistency is essential – Typical formation is ``action-modifier(s)-
object(s)''
![Page 181: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/181.jpg)
Guidelines
• Choose meaningful, specific, distinctive command names – Can be very difficult since all
commands are typically visible at once –May permit abbreviations, but that can
cause additional confusion – Use diametrical opposites for
commands that are logically opposite (e.g. create/destroy)
![Page 182: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/182.jpg)
Guidelines
• Apply consistent rules for abbreviating commands – Single characters may work for small
command sets – For larger, truncation appears best (over such
techniques as dropping vowels, first and last letter, etc)
• Allow easy correction of typing errors – Do not force user to retype lines that had
errors, but allow editing.
![Page 183: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/183.jpg)
Guidelines
• Allow frequent users to develop macros – Geared towards frequent users – Allows for increased speed and
customization
![Page 184: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/184.jpg)
Graphical Interfaces
![Page 185: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/185.jpg)
Description
• The term Graphical User Interface (GUI) has come to represent interaction objects such as windows, buttons, etc.
• Generally use direct manipulation with an object-action paradigm and visual feedback
• This is just a subset of various ways to use graphics to communicate. Call that superset graphical interfaces.
![Page 186: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/186.jpg)
Types
• Data and Scientific Visualization – This includes charts, graphs, plots, etc. – Widely used in the scientific community to
gain insight into large amounts of data (numbers)
• Visual Databases – Store visual images much as you would store
text – Use stored images to construct simulations
![Page 187: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/187.jpg)
Types
• Animation – Effective for simulating various
scenarios – Also, like visualization, can show
temporal relationships
• Video – Combine audio/video with other
windows – Requires more skill to design effectively
![Page 188: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/188.jpg)
Types• Multimedia and Hypermedia
– The integration of graphical, audio and video information with associative links
– Links provide simple navigation through ``hyperspace''
– Navigation must be designed carefully
• Virtual Reality – Represents a greater immersion into the
application with various sensory devices – Still very expensive with much still in
development stage
![Page 189: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/189.jpg)
Guidelines
• Since many of these interaction styles are very new, there is little in the way of hard evidence. The following are heuristics based on common sense and experience
• Use real-world analogies as much as possible – Since systems tend to model the real
world, these analogies work best
![Page 190: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/190.jpg)
Guidelines
• Keep the visual presentation as simple as possible – Avoid the tendency to do too much, just
because you can
![Page 191: CSE 8316 User Interface Design Rob Oshana Southern Methodist University.](https://reader030.fdocuments.us/reader030/viewer/2022032710/56649e315503460f94b22ab4/html5/thumbnails/191.jpg)
Guidelines
• Show different views of the same visual object
• Use color sparingly and meaningfully
• Use video sparingly – Only high-quality video should be used,
and that is difficult to produce