User interface design

System Interface

"connections" with other systems, where systems exchange information with each other. Designed as a part of program design.

Interface Metaphors

- Define how the interface will work - Concept from the real world that is used as a model for the computer system - Helps the user to understand the system and be able to predict the features it may provide (it exploits information he user already has from other domains.) Examples Calendar Shopping cart others folders to show containers for documents magnifying glasses zoom in Binoculars to find things Trash can to delete files More is up, less is down. In music player, volume bar rises, music is louder. Volume bar falls music is softer

Language prototype

- Is built in the actual language or by the actual tool that will be used to build the system. - Is the slowest, most expensive and most detailed approach --> is used for parts of the system that are critical, yet not well understood - Is design in the same ways as HTML Prototype - Takes longer to design than storyboard and HTML prototype. - Advantage: showing exactly what the screen will look like.

Interface Objects

- Is the fundamental building block of the system such as the entities and data stores.

Interface Icons

- They arr some images used to communicate something The interface objects and actions and also their status may be represented by interface icons. - Icons are pictures - The simplest and best approach is to adopt icons developed by others (quick development and the icons may be already well understood ) - Tool tips: text that appear when the pointer hovers over an icon, explains the purpose of that icon. Examples cog wheel - settings Letter- messages Globe- internet Phone- making calls

Basic principles of navigation design

-Assume users have not read the manual have not attended training dont have external help readily available All controls should be clear and understandable and places in an intuitive location on the screen. -Prevent mistakes Limit choices Never display/grey out commands that cant be used Confirm actions that are difficult/ impossible to undo like the confirmation message when you're about to delete something. -Simplify recovery from mistakes -Use consistent grammar order(action-object, object-action))

Special issues of touch screen design

-Ideal for info display but not data entry -place content at top and navigation controls at bottom so finger does not obscure content area - Place labels on top of navigation controls -Size objects correctly for 'large fingers' -Include adequate spacing between objects - Consider needs for left handed and right handed users -Bright colours can help hide fingerprints and reduce glare. -Use each devices standardized gesture ibteraction(tap, swipe, drag slide pinch) to enhance the users ease of learning and ease of use.

User Interface Design Process

-Understand the Users -Organize the Interface -Define Standards -Develop Prototypes -Evaluation / Testing we don't just evaluate and test the prototype. But we can also evaluate and test the products out of every step.

Interface design prototyping

A mock-up or simulation of screens, forms, or reports Common methods include: - Paper sketches -Wireframe diagrams - Storyboarding - Wireflow diagrams - HTML prototype -Language prototype

Graphical User Interface (GUI)

A visual display on a computer's screen that allows you to interact with your computer more easily by clicking graphical elements. it's the most common type of interface used today

interface template

A(n) _____ defines the general appearance of all screens in the information system.

Content Awareness

All interfaces should have titles Menus should show - where you are - where you came from to get there it's important for the users to know where they are in the system. 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

source data automation

Can be obtained by using the following technologies: - bar code readers / scanners - optical character recognition - magnetic stripe readers - smart cards - RFID (Radio Frequency Identification) tags

Types of input validation

Completeness check Format check Range check when a numeric cue within a particular treshhold Check digit check Whether user applied the check digit. e.g cvv Consistency check When there is a relationship of field values that is known. e.g E.g you enter your age in one field and your date of birth in another. Since these 2 fields are related we can check 4 consistency Database checks We verify entry based on the values in a database.

User Interface

Connections with users Focus on this. Navigation mechanism input mechanism output mechanism

Basic output design principles

Conveying the information the user needs -Understand reports usage Reference or cover to cover Frequency realtime or batch reports - Manage information load - All needed info, no more - Minimize bias - Utilize various report types (detail, summary, exception, graphical) and media to satisfy users output requirements.

Organize the interface

Define the basic components of the interface and how they work together to provide functionality to users We make use of the interface structure diagram we define the basic structure of screens forms reports For websites, use a site map. among other things it shows how all the information on the site fits together helps establish the hierarchy of informatio on the site

Define standards

Defining a common language that will be used by the entire design team. Clarify decisions on all key interface elements to ensure consistency: -Basic common elements across individual screens, forms, and reports within the application -Interface metaphor (e.g., calendar, checkbook, shopping cart) -Interface objects (e.g., customer/client; employee/associate) -Interface actions (e.g., buy/purchase/check out; exit/quit) -Interface icons (pictures) representing status or actions (e.g., trashcan for delete; disk for save) -Interface templates (layout guide for all screens)

Minimize Effort. Three clicks rule

Effort required to perform a particular action or task should be kept at a minimum. Users should be able to go from the start or main menu of a system to the information they want in no more than three clicks of a mouse

Consistency

Elements are the same throughout the application Enables users to predict what will happen. This helps Reduces learning curve Consider elements within and across an application. this pertains to many different levels - Navigation controls -Terminology -Report and form design

Usage Level

Focus here is on user experience. -Frequent users (experienced) desire ease of use- quick and easy completion of job tasks. - Infrequent users desire ease of learning- quick and easy ways to figure out what to do. UI design should anticipate the types of users expected. For users primarily used by frequent users, include ways to perform tasks directly. (hot keys, short-cut keys etc) those with infrequent users, include careful menu designs, tool tips and extensive help systems. Those wih both, incorporate both

Interface evaluation methods

Heuristic evaluation - Compare design to checklist of design principles Users are never involved. only involves internal design team. -when is it appropriate to use Where the interface is well understood/ little uncertainty about how interface should function. Walkthrough evaluation - Team simulates movement through components The user are walked through the interface in a presentation format. They are not engaging with the interface. Interactive evaluation - Users try out the system Best to use When the prototype has been created they can give direct feedback based on their experience -Most widely used Formal usability testing - Expensive - Detailed use of special lab testing The user goes through the system without guidance of the project team. The team monitors user behaviour and movements and recording them for later analysis.

Minimize Keystrokes

Keyboard entry is slow and error-prone Never ask for information that can be obtained other ways - Lookups - Dropdown lists - Default values

Principles for user interface design

Layout Content awareness Aesthetics Usage level Consistency Minimize user effort

Menu tips

Menus enable users to select action from an organized display of action categories and options Broad and shallow design is preferred Logical categories can be objects (customers; orders) or actions (insert, design) Common menu formats include menu bars, drop-down menus, popup menus, tab menus, icon tool bars, and image maps. Menus may become less popular with trend toward touchscreens

Wireflow diagrams

Merger of story board and wireframe

Capture Data at the Source

Reduces duplicate work Reduces processing time Decreases cost Decreases probability of error

Wireframe Diagram

Shows basic content and behavior of screens

Storyboarding

Shows how screens will look and how they will flow

Interface structure diagram characteristics

The box has unique no. Unique name The DFD process supported

Basic Principles of input design

The goal is to simply and easily capture accurate information for the system Reflect the nature of the inputs Find ways to simplify their collection

Layout Concepts

The screen is often divided into three boxes - Navigation area (top) - Status area (bottom) - Work area (middle) Information can be presented in multiple areas Like areas should be grouped together Areas and information should minimize user movement from one to another. Areas should remain consistent in. Size shape placement for entering data reports presenting retrieved data

Usability Concept

The system is easy to use and easy to learn when it is highly usable, then-: Tasks are completed more efficiently and with more accuracy Mistakes with system are reduced User satisfaction with new system is increased when this is achieved, the adoption of system is more likely NB terms ease of use and ease of learning are vague terms. Different organisations have different metrics to measure this

Standardized gestures ( Android device)

Touch/tap- select( default functionality) Long press triggers data selection mode swipe- Scroll through content. its quiet k and effect continues after finger is lifted drag-Slower more precise scroll that stops when finger is lifted Long press drag- Rearrahges or moves elements Two finger pinch open- Zoom in Two finger punch close-Zoom out Double tap/touch- Scales up the target Double touch drag- scales content by pushing away or pulling closer

Model layout for webpage

Use of multiple layout areas for site navigation

User Interface Design process

User analysis, collecting functionality requirements, information architecture, prototyping, usability testing, and graphical interface design.

Understand the users

Users likely will have very different goals and intentions when using the system. Use personas to develop characterizations of various user groups. - Interests - Typical behaviors - Goals and objectives - Expectations Plan a user interface that will be satisfying for that particular user group. Use scenarios outline the steps that the users perform to accomplish some part of their work. Presented in a simple narrative tied to the related DFD. Document the most common paths through the use case so interface designs will be easy to use for those situations. We make use of these tools: personas and use case scenarios

Message tips

Ways system informs user on status of the unteraction. Common message types include: - Error message let them know whets wrong and what they need to do next - Confirmation message Whenever the user has entered a command, that has a major significance and can be destructive. To verify if the action they are attempting is deliberate. E.g force shutting down system. - Acknowledgment message Signify that an action or task is complete. - Delay message That the system is performing a task and user is to wait. - Help message Provide the user with additional information. Used to give user instructions and guidance. Context sensitive help. Based on what the user is doing Strive for clear, concise, and complete messages Should be grammatically correct and free of jargon and abbreviations (unless they are the users') Avoid negatives and humor (it gets old)

Metaphor

a figure of speech in which an expression is used to refer to something that it does not literally denote in order to suggest a similarity A figure of speech containing an implied comparison a figure of speech where an expression which is not litteral is applied to something or a situation to suggest a similarity. e.g A couch potato- Lazy apple of my eye- someone you cherish. Bottled up inside-Keeping a feeling inside without expressing it Fork in the road- A point where you have to make a decision

wireflow

a hybrid diagram that combines traits of wireframes and flowcharts The use of screen designs rather than abstract flowcharts keeps focus on the product with which users will be interacting

batch processing

collects inputs over time, holds them temporarily, and then processes all the transactions at one time in a batch advantage. It simplifies data communications and other processes. disadvantage Masterfules are not updated in real time

Interface Actions

common commands that will be employed by the users e.g., buy/purchase/check out; exit/quit) others Play/ stop -music platform/ video Save/ delete

input mechanism

defines the way the system captures information e.g forms for adding new customers

output mechanism

defines the way the system provides information to users or other systems e.g reports and webpages

input validation

ensures accuracy

Online processing

immediately records the transaction in the appropriate database advantage. Master files are updated in real time

Aesthetics

interface needs to be functional and inviting to use They should be pleasing to the eye Avoid squeezing in too much Design text carefully. - Avoid using all capital letters - Be aware of font and size Colour and patterns should be used carefully -Test quality of colours by trying the interface on a black/ white monitor. - Use colours to separate or categorize items

navigation mechanism

provides the way for users to tell the system what to do e.g Buttons and menus.

Interface Structure Diagram (ISD)

shows how all screens, forms, and reports in the system are related. Shows how users move from one to another Similar to DFDs in using boxes and lines Boxes denote screens lines show movement from one to another Different to DFDs in having no standard rules or format