1 / 23

User Interface Design

User Interface Design . Student : Hanan Al.Maziad , ID# 433920278. 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.

Download Presentation

User Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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

More Related