Sketching a Conceptual Design from User Experiences and a Task Model
Mapping User Experiences and UI requirements into Design is Hard!
Translating user requirements, task analysis, scenario, and personas into a design (screens, windows, etc.) is not a simple matter of establishing correspondences between user interface elements and abstract design model.
Symbols selection: tabbed dialog box
Symbols selection: combo box
Symbols selection: magnifier with selector and spin-list selector
Options selection: tabbed dialog box
Options selection: tree browser
Options selection: menu
Principles for mapping design models
- Different visual design are possible for the same model
- The best ones is those that users like and approve (testing is required)
- Patterns are potential solutions
- The worst solutions is those that developers image good and try to impose
- Developers day-to-day practices, if not empirically validated, are not solutions
- Suggestions from user are good solutions
Iterative Design and Prototyping
Outlines
1- Iterative Design
2- Prototyping Principles Approach, Techniques and Tools
3- Benefits of Prototyping
Iterative Design
- Is the process of building a concrete and visible design solution staring from a user-centered requirements description of the system
- Prototypes can be used in this process to validate requirements with end-users, gather further information, estimate the design difficulties and develop solutions, etc.
A prototype:
- Simulates the structure, functionality, or operations of the system
- Represents a model of the product to be built
- May or may not implement any real functionality
Different kinds of prototyping:
- Low-fidelity versus high-fidelity prototypes
- Horizontal versus vertical prototyping
- Prototyping techniques range from paper to computer-based including video, simulations, etc.
Low versus high-fidelity prototypes
- Fidelity refers to the level of detail
- High fidelity: prototypes look like the final product
- Low-fidelity: prototype with many details missing
Low-fidelity prototypes are:
Cheap, rapid versions of the final system
- limited functionality and/or interactivity
Depict concepts, designs, alternatives, and screen layouts rather than a model user interaction with a system
- e.g. storyboard presentations, proof-of-concept prototypes
Demonstrate the general ‘feel and look’ of the UI
- their purpose is not to show in detail how the application operates
Are often used early in the design cycle
- to show general conceptual approaches without investing too much time or effort
High-fidelity prototypes are:
Fully interactive
- Users can enter data into entry fields, respond to messages, select icons to open windows, and interact with the UI
Represent the core functionality of the product’s UI A
Typically built with 4GLs such as Smalltalk or Visual Basic
- Can simulate much of the functionality of the final system
Trade off speed for accuracy
- Not as quick and easy to create as low-fidelity prototypes
- Faithfully represent the UI to be implemented in the product
- Can be almost identical in appearance to the actual product
Advantages / LimitationsLow-Fidelity Prototyping / - Lower development cost
- Evaluate different design concepts
- Useful communication vehicle
- Addresses screen layout issues
- Useful for identifying market requirements
- Proof of concept / - Limited error checking
- Poor detailed specification for coding
- Limited usefulness after requirements established
- Limitations in usability testing
- Navigational limitations
Medium-Fidelity Prototyping / A compromise between high and low-fidelity prototypes
Establish your own!
High-Fidelity Prototyping
/ - High degree of functionality
- Fully interactive
- User driven
- Defines navigational scheme Useful for exploration and testing
- Look and feel of final product
- Serves as a living specification
- Marketing and sales tool / - More expensive to develop
- Time consuming to build Inefficient for proof of concept designs
- Not effective tool for requirements gathering
Approaches for limiting prototype functionality
PrinciplesVertical / - Contains in-depth functionality for only a few selected features, but not the entire system
E.g. In an airline flight information system, users can access a database with some real data from the information providers, but not the entire data
- Lower performance than the final system (e.g. trial system with a limited number of simultaneous users)
- May be non-networked, not fully scalable,
Horizontal / - Includes the entire user interface with no underlying functionality, a simulation; no real work can be performed
E.g. Users can execute all navigation and search commands, but without retrieving any real information as a result of their commands
- Reduced level of functionality, but all of the features present
Approaches for limiting prototype functionality: scenario
- Scripts of particular fixed uses of the system; no deviation allowed
- Both the level of functionality and the number of features are reduced
- Very cheap to design and implement
- But, only able to simulate the UI as long as the test user follows a previously plan test
- Small, can be changed frequently and re-tested
- Reduced level of functionality and reduced number of features
- Can be developed using one or several task scenarios
Techniques for prototyping
Low-Fidelity Prototyping Techniques
- Sketches and paper prototyping
- Pictive, with pre-made interface components on paper
Medium-Fidelity Prototyping Techniques
- Drawing produced on computer
- Storyboarding
- User interface builders in testing mode
- Slides shows and simulations
- Wizard of Oz
High-Fidelity Prototyping Techniques
- Computer-based prototyping: Visual Basic, RAD, HTML Editing Environments
Paper prototyping
[Rettig, M (1994) Prototyping for tiny fingers. Communications of the ACM, April, Vol.37, No.4.]
- This technique features the use of simple materials and equipment (paper and pencil) in order to create a paper-based simulation of an interface or system.
- Paper prototypes provide a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation.
- Interface elements such as menus, windows, dialogues and icons can be sketched on paper or created in advance using card, acetate, pens etc.
- When the paper prototype has been prepared a member of the design team sits before a user and ‘plays the computer’ by moving interface elements around in response to the user’s actions.
- The user makes selections and activates interface elements by using their finger as a mouse and writing ‘typed’ input. A further person facilitates the session by providing task instructions and encouraging the user to express their thoughts and impressions.
- Other observers may make notes or a video record may be created.
Storyboarding
[Androile S (1991) Storyboard Prototyping. QED Information Sciences, Wellesley, MA.]
- Storyboards are sequences of images, which demonstrate the relationship between individual screens and actions within a system.
- A typical storyboard will contain a number of images depicting features such as menus, dialogue boxes and windows.
- The formation of these screen representations into a sequence conveys further information regarding the structure, functionality and navigation options available within an intended system.
- The storyboard can be shown to colleagues in a design team as well as potential users, which allows others to visualize the composition and scope of an intended interface and offer critical feedback.
- This method can be used early in the design cycle where the use of storyboards supports the exploration of design possibilities and the early verification of user requirements.
Storyboard
: Word Main Window, Help System, and Open File Dialog Box
Video Prototyping
[Vertelney, L (1989) Using video to prototype user interfaces. SIGCHI Bulletin, V21 (2), pp 57-61.]
- This method allows designers to create a video-based simulation of interface functionality using simple materials (paper, acetates) and equipment (camcorder).
- Interface elements are created using paper, pens, acetates etc. For example a start state for the interface is recorded using a standard camcorder.
- The movements of a mouse pointer over menus may then be simulated by stopping and starting the camcorder as interfaces elements are moved, taken away and added.
- Users do not directly interact with the prototype although they can view and comment on the completed video-based simulation.
Wizard of Oz
[Maudsley, Greenberg and Mander (1993) Prototyping an intelligent agent through Wizard of Oz. Interchi’93 Conference Proceedings.]
- A method of testing a system that does not exist
- This approach involves a user interacting with a computer system which is actually operated by a hidden developer - referred to as the "wizard’"
- A person hidden to the user provides feedback
- During this process the user is led to believe that they are interacting directly with the system.
- This form of prototyping is beneficial early on in the design cycle and provides a means of studying a user’s expectations and requirements.
- The approach is particularly suited to exploring design possibilities in systems, which are demanding to implement.
Software-Based Prototyping
[Isensee, S, and J Rudd (1966) The Art of Rapid Prototyping. International Thomson Computer Press, London.]
- This method is concerned with developing different proposed concepts through software or hardware prototypes, and evaluating them.
- Rapid prototyping is described as a computer-based method, which aims to reduce the iterative development cycle.
- Interactive prototypes are developed which can be quickly replaced or changed in line with design feedback.
- This feedback may be derived from colleagues or from the experiences of users as they work with the prototype to accomplish set tasks.
- Within software engineering circles the method is closely associated with user interface management systems and various design support tools. The latter tools offer the designer libraries of procedures and graphical interface elements for defining the software’s logical structure and ‘look-and-feel’.
Rapid Application Development and Joint Application Design Workshops
[Andrews, D.C. (1991) JAD: A crucial dimension for rapid applications development. Journal of systems management, March 23-31.]
RAD Workshop
- RAD Workshops are set up in which 8-20 individuals make design decisions through the consensus building leadership of a trained, unbiased facilitator who is not a stakeholder in the future system.
- A number of different formats for the method are offered. One variation produces formal outputs such as entity-relationship models, which can be input directly into the system specification.
JAD Workshop
- Is a RAD specific variation developed within IBM? Here users and information systems professionals are drawn together to design a system jointly in a facilitated group session.
- Six roles are defined including session leader, user representative, specialist, analyst, an information systems representative and an executive sponsor.
- A 20% to 60% increase in productivity over traditional design methods is claimed.
Prototyping Process
1- Developing Paper or Computer-Based Prototypes
- Each prototype describes design ideas or product concepts with a focus on usability
2- Testing Each Prototype in a Testing Lab with Potential End-Users
3- Improving the Prototype by Using the Usabulity Testing Results
- Usability Results are analyzed, prioritized and Translated in Design Modifications
4- Once the results are satisfactory, the prototype is stabilized and tested.
Benefits of Iterative Design and Prototyping
1- Get feedback on our design faster
2- Decrease the cost of development and maintenance
3- Experiment with alternative designs
4- Fix usability problems before code is written
5- Keep the design centered on the user
6- Improves quality and speed of system specification and design.
7- Is integrated with current structured methods and CASE tools.
8- Promotes co-operation, understanding and teamwork among the various user groups and development staff.
9- Can be used at various levels of detail, including concept, requirements, specification and design.
Benefits of Iterative Design and Prototyping
Reported by Catani, M.B., And Biers, D.W. (1998). Usability Evaluation and Prototype Fidelity: Users and Usability Professionals. Proceedings of the Human Factors and Ergonomic Society, 42nd Annual Meeting.
- Cantani and Biers (1998) investigated the effect of prototype fidelity on the information obtained from human performance test
- Three levels of prototypes:
- 30 university students performed 4 typical library search tasks using one of the prototypes
- Paper - low fidelity
- Screen shots (storyboards) - medium fidelity
- Interactive Visual Basic - high fidelity
- Total of 99 usability problems were uncovered
- No significant difference in the number and severity of problems identified, and a high degree of commonality in the specific problems uncovered by users using the 3 prototypes
Discussion about the Power of Prototyping: The Perils of Prototyping Tool by Alan Cooper
http://www.cooper.com/articles/vbpj_perils_of_prototyping.html Screens and GUI Elements Design
Outlines
1- WIMP Model (WIMP= Windows, Icons, Menus, Pointers)
2- Screens Design Principles
3- Grid as screen design tool
WIMP Model = Windows, Icons, Menus, Pointers User Interface
- Programmers tend to think primarily in terms of windows and dialogue boxes, but modern GUIs provide a large range of choice to implement the design solutions:
Windows
- Primary windows, secondary windows, utility windows (a window whose contents affect an active primary window), and Plain windows (no title bar or window controls) provide the top-level containers for your application.
Containers: panels and frames
- A panel is a container for organizing the contents of a window or dialog box: panel, scroll panel, tabbed panel (tab cards), toolbar, group boxes and headings
- An internal frame is a container used in MDI (Multi-Document Interface) applications to create windows that users cannot drag outside of the desktop panel
Icons
- Graphic representation of objects such as documents, storage media, folders, applications, and the Trash. Icons look like their real-world counterparts whenever possible.
Controls
- Command Button, Toggle Button (buttons with two States e.g. On/Off), Checkbox, Radio Button, Combo Box, Menu, Pop-Up Menus (Contextual Menu), Toolbar