User Interface Design

1. UserInterface Design Student: HananAl.Maziad, ID# 433920278

2. User Interface Design Definition Graphical User Interface (GUI) Is the most common type of interfaces Most students are likely to use personally and for developing systems. • Is the first task in the systems design phase of the SDLC • How the system will interact with external entities? • How systems exchange information with other systems

3. User Interface Design Consists of All the hardware, software, screens, menus, functions, and features that affect two-way communications between the user and the computer

4. User Interface Design Principles Layout Content awareness Aesthetics User experience Consistency Minimal user effort

5. User Interface Design Principles……1-Layout • The screen is often divided into three boxes. • Information can be presented in multiple areas. • Like areas should be grouped together. Navigation area ……..at the(top) • Work area…….at the (middle) • Status area …at the (bottom)

6. User Interface Design Principles……1-Layout • Ideally, areas will remain consistent in • Size • Shape • Placement for entering data • Reports presenting retrieved data Navigation Area Reports & Forms Area Status Area

7. User Interface Design Principles……2-Content Awareness • All interfaces should have titles • Menus should show • where you are • where you came from to get there • It should be clear what information is within each area • Fields and field labels should be selected carefully • Use dates and version numbers to aid system users

8. User Interface Design Principles……3- Aesthetics • Interfaces need to be functional and inviting to use • Avoid squeezing in too much, particularly for novice users • Design text carefully • Be aware of font and size • Avoid using all capital letters • Colors and patterns should be used carefully • Test quality of colors by trying the interface on a black/white monitor • Use colors to separate or categorize items

9. User Interface Design Principles……4-User Experience • Ease of learning • Significant issue for inexperienced users • Relevant to systems with a large user population • Ease of use • Significant issue for expert users • Most important in specialized systems

10. User Interface Design Principles……5- Consistency • Enables users to predict what will happen • Reduces learning curve • Considers items within an application and across applications • Pertains to many different levels • Navigation controls • Report and form design

11. User Interface Design Principles……6- Minimal user effort • Interfaces should be designed to minimize the effort needed to accomplish tasks • A common rule is the three-clicks rule • Users should be able to go from main menu of a system to the information they want in no more than three mouse clicks 2 3 1

12. User Interface Design Process

13. User Interface Design Process…..1- Use Scenario Development • An outline of steps to perform work • Presented in a simple narrative tied to the related DFD • Document the most common cases so interface designs will be easy to use for those situations

14. User Interface Design Process…..2- Interface Structure Diagram • A diagram showing how all screens, forms, and reports are related • Shows how user moves from one to another • Similar to DFD in using boxes and lines • Boxes denote screens • Lines show movement from one to another • Different from DFD in having no standard rules or format Interface Structure Diagram Example

15. User Interface Design Process…..3- Interface Standards Design • The basic elements that are common across individual screens, forms, and reports within the application • Standards are needed for: • Interface objects • Interface actions • Interface icons • Interface templates

16. User Interface Design Process…..4- Interface Design Prototyping • A mock-up or simulation of screen, form, or report • Common methods include • Paper • Storyboarding • HTML • Language Storyboard Example

17. User Interface Design Navigation Design • The component that enables the user to navigate through the system • Also provides messages of success or failure of actions performed • Basic principles: • Prevent the user from making mistakes • Simplify recovery for the user when mistakes are made • Use a consistent grammar order (e.g., File ► Open vs. Open ► File)

18. User Interface Design Types of Navigation Control • Languages • Command language • Natural language • Menus • User is presented a list of choices • Comes in different forms (e.g., menu bars, popups, drop downs) • Direct Manipulation • Used with icons to start programs • Used to shape and size objects • May not be intuitive for all commands

19. User Interface Design Input Design • The goal is to simply and easily capture accurate information for the system • Screens that are used to input data • Data can be structured or unstructured • Structured: Dates, names, etc. • Unstructured: Comments, descriptions • Basic principles • Online vs. batch processing • Capture data at the source (e.g., barcode ) • Minimize keystrokes (e.g., by using defaults for frequently used values)

20. User Interface Design Input Design (Types of Inputs) • Data items linked to fields • Text • Numbers • Selection boxes • Check boxes • Radio buttons • On-screen list boxes • Drop-down list boxes • Combo boxes • Sliders

21. User Interface Design Process…..5- Interface Evaluation • Goal is to understand how to improve the interface design before the system is complete • Have as many people as possible evaluate the interface • Ideally, interface evaluation is done while the system is being designed—before it is built • Help identify and correct problems early • Designs will likely go through several changes after the users see it for the first time

22. User Interface Design Questions:Complete the following:1-The ……………describe the inputs and output that directly involve system user.Answer: User Interface.2-The degree to which system is easy to learn and use is………………………Answer: Usability.

23. User Interface Design Thank You Hanan