Graphical User Interfaces

Graphical User Interfaces1Enterprise Application Development Unit Code 425Graphical User InterfacesEnterprise Application DevelopmentIFS Training IFS Applications 2003

2

3Graphical User InterfacesHistory of the GUIsDesigning GUIsSwing Architecture GUI Elements GuidelinesUser Interaction Changes in other domainsHCI Human Computer InteractionLatest Developments

Agenda4GUI is the bridge between the interactive program and its user. Enterprise / Business applications (ex: SAP) Office applications (ex: Word, Excel) Scientific applications (ex: Matlab)

Productivity of the user attained through working with the application greatly depends its GUI

A proper GUI design directly improves usability of the application, hence improves productivity and throughput.

A good GUI design is essential and critical for a successful Interactive Application.The GUI5In this lecture, we learn how to design good GUIsWe do not go into Java source-code level

History of the GUIs

67In the oldest days (1950s) Batch Processing Systems Input through punch cards Output through printouts and lights Taken hours / days to process

Command line interfaces Entering text lines on a terminal with keyboard Terminals connected to mainframe through Telnet Long learning curve, Possible tasks are narrow in scope

Graphical User Interfaces WIMP: Windows, Icons, Menus and a Pointing device paradigm Windowing System: Handles hardware: graphics, pointing device and other input devices Window Manager: Facilitates interaction between Applications, Widows and the Windowing System Modern PCs follow this paradigm (Vista, Unix X-Windows)Evolution

8Vannevar Bush Memex An Imaginary device (1930s)2 touch- screen graphical displaysA keyboardScanner History of GUIs

In Bush's 1945 paper, he describes a memex as an electromechanical device that an individual could use to read a large self-contained research library, and add or follow associative trails of links and notes created by that individual, or recorded by other researchers.

ENIAC (Electronic Numerical Integrator and Computer) was the first electronic general-purpose computer. It was Turing-complete, digital, and capable of being reprogrammed to solve a full range of computing problems. ENIAC was designed to calculate artillery firing tables for the United States Army's Ballistic Research Laboratory.

As We May Thinkis an essay byVannevar Bush, first published inThe Atlanticin July 1945, and republished again as an abridged version in September 1945 before and after the U.S. nuclear attacks on Japan. Bush expresses his concern for the direction of scientific efforts towards destruction, rather than understanding, and explicates a desire for a sort ofcollective memorymachine with his concept of thememexthat would make knowledge more accessible, believing that it would help fix these problems. Through this machine, Bush hoped to transform an information explosion into a knowledge explosion.[1]9Vannevar Bush World War II Designed to calculate artillery firing tables ENIAC (Electronic Numerical Integrator and Computer)History of GUIs

In Bush's 1945 paper, he describes a memex as an electromechanical device that an individual could use to read a large self-contained research library, and add or follow associative trails of links and notes created by that individual, or recorded by other researchers.

ENIAC (Electronic Numerical Integrator and Computer) was the first electronic general-purpose computer. It was Turing-complete, digital, and capable of being reprogrammed to solve a full range of computing problems. ENIAC was designed to calculate artillery firing tables for the United States Army's Ballistic Research Laboratory.

As We May Thinkis an essay byVannevar Bush, first published inThe Atlanticin July 1945, and republished again as an abridged version in September 1945 before and after the U.S. nuclear attacks on Japan. Bush expresses his concern for the direction of scientific efforts towards destruction, rather than understanding, and explicates a desire for a sort ofcollective memorymachine with his concept of thememexthat would make knowledge more accessible, believing that it would help fix these problems. Through this machine, Bush hoped to transform an information explosion into a knowledge explosion.[1]

10Douglas Englebart (father of GUI) Paper: Augmenting the Human Intellect Augmentation Research Center NLS (oNLine System) Creation of digital libraries; storage/retrieval of electronic documents using hypertext

History of GUIs

In 1968 an American inventor named Douglas Englebart did a 90 minutes presentation where he introduced the mouse. He even held a live video conference with staff 30 miles away. The technology was way ahead of time that most people didn't even believed it1011The Mother of All Demos 90 minute multimedia presentation at Fall Joint Computer Conference, at the Convention Center in San Francisco, 1968 December 09 Introduced: Mouse Interactive Text (Concept of present day hyperlinks)Videoconferencing TeleconferencingThe first GUI Live video conference with staff members 30 miles away. Way ahead of time, many did not recognize, some didnt even believe! Even entering text on a terminal was considered revolutionary back then.History of GUIs

In 1968 an American inventor named Douglas Englebart did a 90 minutes presentation where he introduced the mouse. He even held a live video conference with staff 30 miles away. The technology was way ahead of time that most people didn't even believed it11Xerox Alto computer (1973) First GUI in a commercial computerIntroduced Windows-Icons-Menus and Pointer device (WIMP) paradigm First commercial Mouse

History of GUIs12Designing GUIs1314The golden rule is that there are no golden rules. George Bernard ShawThis is the first ruleDesigning GUIs14Rule 1: Know the userDesign for what the user knows, not what you know.Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features.By focusing on your user first, you will be able to create an interface that lets them achieve their goals.Designing GUIs15

15Rule 2: Let user take controlApplication may have so many input combinations.Prohibit only logically invalid combinations.Thinking of and testing all logically valid combinations can be tedious. But prohibiting such restricts users freedomThis damages usability and desirabilityDesigning GUIs1616Rule 3: Adhere to common PatternsToo many bright ideas end up being good featuresToo many good features can turn out being bad!Facebook, Gmail, Twitter

Designing GUIs17

Rule 4: Exploit users intuition whenever possibleDepending on what user already knows, he may be able to make a decision easily and accurately. If user can guess a symbol, you dont have to tell him aloud!

Ex: Think of the following buttons in Microsoft Word:

Designing GUIs18Rule 5: Let user recognize instead of recallPeople can recognize far way easily than recalling.Whenever the choices are limited in number, provide them in a combo box instead of letting him to type in a text field.This would eliminate both the risk of typographic errors and the reluctance (fear) of it.

Designing GUIs19Rule 6: Minimize vocabulary and be consistent on wordsWe interact with the user in words, be it the data itself, or the text on the labels, the text on the buttons, information messages, etc.Do not use two synonyms to indicate the same thing in different placesTry to minimize the vocabularyUse consistent patterns in information / warning / error messagesUsing different words in different places to identify the same thing reduces consistency.This leads to confusion and ultimately frustration for the users.Designing GUIs20Rule 7: Make application behavior as consistent as possible.Try to exploit similarities in different operations in your application. Whenever they are similar, implement their behavior similarly so that user can reuse his knowledge Also increases user confidence since he can predict the next step and succeed.Ex: Changing customer address on a Purchase Order and a Shop Order.

Designing GUIs21

Rule 8: Dont keep the user waiting without letting knowNever keep the user waiting till a long operation is complete without letting him know that we are aware of his patience.If it takes only a couple of seconds, display the Hourglass Cursor during the wait.If it takes longer, display a Progress Bar with a message describing what is being done at the moment.

Never ever keep a button pressed till an intensive operation is complete after the user has released it.Use multithreading!Designing GUIs22

Rule 9: Be very short and very clear on textWriting longer messages or descriptions makes users give up reading half way. Be short-and-sweet when writing text, especially when it comes to description labels and messages.

Designing GUIs23 Rule 10: Provide traceable pathsA user may come across numerous windows and suddenly say where am I now? How did I get here?. Provide suitable, descriptive titles to windows and dialog boxes. It helps users follow the paths when they go across them.Use the case of the words consistently.Designing GUIs24

Rule 11: Dont forget the keyboardAdvanced users use keyboard than they use the mouse.So make sure tab orders are correct and proper keyboard - accelerated GUI elements (mnemonics) are used.Try to provide complete and equal level of keyboard and mouse support.Designing GUIs25Rule 12: Be consistent with Presentational ModelMake sure the look and feel of your application is consistent throughout all windows / dialog boxes in your application.Consistency helps preserve the identity of the application.

Designing GUIs2680/20 Rule27

80% of softwares usage involves 20% of its features.Minimize or remove less important functions.Optimize 20% of the features. Toolbar, icons, etc.3 Click Rule28A user of a website should be able to find any information with no more than three mouse clicks.Swing Architecture29 Java came with AWT Abstract Windowing Toolkit a set of classes to build GUIs A subsequent addition was Swing class library built on top of AWT providing features necessary to develop sophisticated user interfaces.GUI components labels, buttons, checkboxes,, dialog boxes, windowsJava 2D API Graphics, images, animations, effectsPluggable Look and Feel Dynamically change look and feelData transfer Clipboard, drag & dropInternationalization culture specific GUI elements & layoutsAccessibility support for software for people with disabilitiesUndo support built in support for undo & redo operationsFlexible deployment Applets, Java Web Start

Java GUI Libraries30

GUIs are inherently event driven. Java does not provide language level support for events Event behavior is attained through Observer design patternEventListener

void eventOccurred(EventObject);eventListenersMyListenervoid eventOccurred (EventObject){ // handle the event}

EventSource

void addListener(EventListener){}void removeListener(EventListener){}void fireEvent(){ for each registered event listener do: call eventOccurred(eventObject).}*Events31 A GUI needs multithreading in order to make GUI-specific operations independent of the application logic in their execution.

Enables implementing GUIs that never freeze.

3 thread types: Initial threads Event dispatching thread Worker threads (a.k.a. Background threads)Swing Threads32Initial threads Every program has a set of threads where the application logic beginsIn a standalone application, only one such thread: main threadIn applets the initial threads are the ones that construct the applet object (threads that started init() and start()).When a Window / JWindow / Frame / JFrame was shown first, the Event Dispatching Thread will start and listening to event dispatch requests.After making the call, the initial thread (s) may exit

Event Dispatch ThreadResponsible of dispatching events and updating the GUI.Not safe to do GUI changes from other threadsThese events are primarily update events that cause user interfacecomponentsto redraw themselves, or input events frominput devicessuch as the mouse or keyboard

Swing Threads33 http://en.wikipedia.org/wiki/Event_dispatching_threadWorker Threads (a.k.a. Background Threads)Introduced from Java SE 6Used to execute tasks that require longer durationsImplemented by subclassing the javax.swing.SwingWorker

It enables the application to have the long tasks executed on a different thread. The application handles small tasks, such as button clicks, by one thread and the long taking tasks by another thread.

Swing Threads34

Standard edition34GUI Elements - Guidelines

35Discussing some guidelines to follow in a good designAdopted from the proposed guidelines for Windows Vista.GUI Elements - Guidelines36Control LabelsLabels are used to label user controlsAlways align labels with the associated control.

Keep labels brief !Prefer specific label over generic ones. Idea is, user shouldnt have to read anything else to understand the label

GoodBadGUI Elements - Guidelines37Control Labels Omit instructional verbs common with the control type

GoodBadGUI Elements - Guidelines38ButtonsA button represents an action. By pressing a button, user performs the action.Indicate the action as briefly as possible. Do not mention already known information.

Use ellipses if additional data is required to perform the action

- Will display a dialog box to gather more data before printing

- Prints a single copy of the document using default settings

Use a minimum width and a standard height. For a given window, make buttons the same width. If this is not possible, minimize the number of different widths.

If a dialog box has multiple command buttons, stack them at the right side or on a single row at the bottom

Mark the default button of each dialog box. Default button should be the least damaging button if accidentally pressed. If no such condition, chose the most convenient, or most commonly used button as the default one.GoodBad

GUI Elements - Guidelines39ButtonsIf a button has a particular functional relationship with another control, place it in a position to reflect the relationship.

GUI Elements - Guidelines40Dialog Boxes Use the standard dialog boxes whenever possible, instead of creating your own ones.

Dont use OK/Cancel to a Yes/No question If saying either Yes or No ends up in a different place, provide Cancel to cancel the whole thing. Use icons to emphasize the purpose of the message.Indicates you are giving user an information. Use OK button with it.Indicates you are asking a question the user should make a choice.Either you provide an information regarding some serious situation (mostly, application errors), or you are asking a question where a wrong decision can be damaging.A critical error (system error) or (very rarely) a question where a wrong decision can be catastrophic (ex: dropping a database / formatting a hard disk)

GUI Elements - Guidelines41

Messages

Prefer positive phrasing: use do instead of dont

However, it is ok to use dont if the scenario is the user is commanding us (ex: Dont show this message again)

GUI Elements - Guidelines42MenusA menu is a list of commands or options available to the user in the current context

Drop down menus are menus displayed on-demand on mouse click or hover. Efficient way to save screen space. A submenu is a secondary menu displayed on-demand from within a menu. A menu item is an individual command or option within a menu. A menu bar is where menus are categorized. Typically located at the top of the body of the window A popup menu drops down when user right-clicks on the object or the window area where a context menu is available

GUI Elements - Guidelines43Menus When to use a Menu Bar?The window is the primary windowThere are many operationsThere are multiple categories of operationsThe majority of the menu items apply to the entire program and primary windowMenu Bars UsageDont introduce a menu if it has only 3 or less number of categories.Consider alternative light weight solutions such as introducing buttons or a toolbar.Dont introduce more than 10 menu categories.

GUI Elements - Guidelines44Menus When to use a Popup Menu?The set of commands apply only to the particular group of objects or areaThe menus are redundantTarget users are familiar with popup menus Menu CategoriesUse simple word names for menu categoriesFor programs that create/edit documents, use standard menu categories (ex: File, Edit, View, Tools, Help..)For other types of programs, try to categorize menus by their natural categories based on the programs purpose and the way users think of their tasks and goals.Within the menu, put the groups in their logical order / order of importance.Use task-oriented menu categories over generic ones. They are easier to find.

GUI Elements - Guidelines45

4546MenusDisable menu items / submenu items if they dont apply in the current context, instead of removing them.

You may use Icons, Check Boxes and Radio Buttons as menu items.GUI Elements - GuidelinesUser Interaction Changes4748Desktop ApplicationsDiscussedWeb ApplicationsBased on a page container called Web BrowserFewer user operationsNavigating through hyperlinks and address barBack and forward buttonsWeb page designing very different from Desktop GUI designingHeavy emphasis on Graphics and ImagesRecent developmentsDiverging from page-for-request model since the arrival of AjaxConvergence towards desktop applications with sophisticated web applications (ex: Facebook, Yahoo mail, Gmail)User Interaction Changes in other domainsUser Interaction Changes in other domainsMobile Applications Constrained programming environmentLimited CPU / Limited memorySmall screen size / Small or no keyboardPointing device stylus with a touch screenConstrained user environmentUsed by mobile usersNo conditions to concentrate as much as can be done in front of a PCUsed in short durationsGUI aspectsProgram constructs provide cut-down user controls(Java ME) Ex: Text Boxes, Commands, Labels, DisplaysSpecial controls(Java ME) Ex: LCD UI, Game canvasGUI is task oriented and tend to become wizardsEach task involves small number of screens (steps), each with small number of GUI elements49HCI - Human Computer Interaction50H C I Human Computer InteractionHuman-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.

Computer ScienceCognitive PsychologySocial & Organizational PsychologyErgonomicsArtificial IntelligenceLinguisticsPhilosophy, Sociology, Anthropology51How users interact with computers is important in almost all of these areas51Latest Developments52Better understanding of user behavior more elaborate GUI componentsEx: Vista / Windows 7RibbonsPrompts and Search BoxesEnhanced progress bars and Meters

Latest Developments - Interaction53Better understanding of user behavior more elaborate GUI componentsAdvanced User InteractionMicrosoft SurfaceCommunicate by touch-onlyWii RemoteCapturing complex hand movements with high precision

Check out MITs sixthsense Project @ http://www.pranavmistry.com/projects/sixthsense/

Latest Developments - Interaction5454Latest Developments - InteractionMicrosoft Surface Demo Video

http://www.youtube.com/watch?v=m-D2lQxsafk&feature=related

5555Microsoft KinectA motion sensor for Xbox 360 gaming consoleNatural User Interface (NUI)Interact without any intermediary controllerRecognizes motion and voiceMotion is sensed by projecting large number of IR beams & reflectionIn addition to gaming, it has been used for digital signage, virtual shopping, education and in health sector.

Latest Developments Touch Devices56 Latest devices such as iPhone, iPad, Android based devices extend interaction capabilities:

Touch screenMulti touch : interaction by gesturesGyroscope and accelerometer: pitch roll yaw / shake gestures

More intimate user experienceMore direct user experiencei.e. user directly controls contentbut not the controls that intern control the contentHigher efficiency / throughput

Latest Developments Touch Devices57Very high resolution screen Ability to provide more content (i.e. information) on screen Eases up limitation of screen real estate

Panning screens More natural way to navigate through multiple steps of a process More natural way to browse information

Process:Step 1Process:Step 2Process:Step 2Process:Step 2ProcessEx: Viewing a slide show

Reading an eBook

Viewing a photo album

Entering a purchase requisitionLatest Developments Touch Devices58Panning Screens

More natural way to present content in a spatially distributed fashionMore natural way to consume content

Latest Developments Touch Devices59Augmented RealityBind information right onto the objects you see and feel!

Camera video stream is captured & directed to screen real time GPS / gyroscope is used to get current location and direction Information has been stored against locations Available information of locations covering current view is shown

Latest Developments Touch Devices60