Q4: User Interface Design

Chapter 8

Interface Design

is the process of defining how the system will interact with external entities

• considered as the front end

User Interface

how the system will interact with the users.

design of system interfaces

defines how the system exchanges information with other systems.

Three fundamental parts of the User Interface:

The Navigation mechanism

The input mechanism

The output mechanism

Navigation Mechanism

1. the way in which the user tells the system what to do.

   • It’s how the user interacts with the system to perform actions, access features, or move between different parts of the interface.

Input Mechanism

1. the way in which the system captures  information.

   • How the system will capture the information from the user

Output Mechanism

the way in which the system provides information to the user or to other systems.

Graphical User Interfaces (GUI)

• use windows, menus, icons, etc., and are the most common type of user interfaces.

  • More specific

  • Uses graphics

User interface design is an art

• The goal is to make the interface pleasing to the eye and simple to use, while minimizing the user’s effort.

• Minimal effort for users

  • Meaning mas onti yung gagawin ni user.

  • Differs in end users; therefore, design is different based on its end-user.

Layout

• refers to organizing areas of the screen and document for different purposes and using these areas consistently throughout the user interface. 

  • Goal is to make it smooth for the users. 

  • Makes it easier to navigate

  • How are you going to put the different components in the screen

Three areas screen is divided into

Top Area - provides the user with ways to navigate through the system

Middle Area - largest area is for display of user’s work

Bottom Area - contains status information about what the user is doing

Areas should remain consistent in

• Size

• Shape,

• Placement for the forms

• reports used to present it

Content Awareness

• the ability of an interface to make the user aware of the information it contains.

  • Bawat form may “Labels” – helps the users to know its purpose

  • You know what for that specific part is

  • Reports are also included

All interfaces should have titles

Aesthetics

• refers to designing interfaces that are pleasing to the eye. 

  • Differs because it depends on the preference of the designer and/or client

• Interfaces need to be functional and inviting to use. 

• In general, all forms and reports need a certain amount of white space.

  • Provide white space to avoid information overload

Fonts and font sizes 

• Depends on users

• Standard font size: 12

• Labels size : 14

• Report font size: 11

• Table content font size: 8 

• Report: Times New Roman

• Presentation / Screen or Display: Arial or Tahoma

Colors and patterns

• The designer must consider the contrast between two colors. “Contrast Testing”

• Color Combination must be within the standards

User experience

• refers to designing the user interface with the users’ level of computer experience in mind.

  • “UX” = User Experience

  • “UI” = User Interface

• Novice users are concerned with easy of learning.

• Expert users are concerned with easy of use.

• Often, the two objectives are complementary and lead to similar design decisions, but sometimes there are trade-offs.

Consistency

refers to the interface within one computer system, so that all parts of the same system work in the same way.  Ideally, however, the system also should be consistent with other computer systems in the organization.

enables users to predict what will happen, and to reduce the amount of learning.

Minimize User Effort

• using the fewest possible mouse clicks or keystrokes to move from one part of the system to another. 

Three-clicks rule

• Users should be able to go from the start or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes.

User Interface Design Process

1. Use Case Scenario Development

2. Interface structure design

3. Interface standards design

4. Interface design prototyping

5. Interface Evaluation

This is iterative

Use Scenario Development

• is an outline of steps that users perform to accomplish some part of their work.

• Use scenarios are presented in a simple narrative description that is tied to the DFD.

  • 1.2, 1.3 can be seen sa DFD

  • All steps should be captured and reflected in the DFD.

Interface Structure Design

• defines the basic components of the interface and how they work together to provide functionality to users.

  • Shows different components that user will use and navigate

• An interface structure diagram (ISD) is used to show how all screens, forms, and reports are related and how the user moves from one to another.

  • Hierarchy

• An ISD is similar to a DFD in that it uses boxes and lines to show the structure.  However, unlike DFDs, there are no commonly used rules or standards for ISDs.

  • It does not look like a DFD. There is no standard unlike DSD. However, there is a standard structure na need i-follow pag ISD.

• The basic structure of the interface follows the basic structure of the business process itself as defined in the process model

Interface Standards Design

• the basic design elements that are common across the individual screens, forms, and reports within the system.

• An interface metaphor is a concept from the real world that is used as a model for the computer system.

  • E.g., Quicken uses a checkbook metaphor, conducting surveys

• The interface template defines the general appearance of all screens and the paper-based forms and reports.

  • Walang standard documentation. Kayo ang maglalagay ng mga content. You will define the templates.

• The template specifies the names that the interface will use for the major interface objects, the fundamental building blocks of the system.

  • Buttons, texts, fonts, color palette, must be templated (explaining their actions)

•  The template gives names to the most commonly used interface actions.

• The interface objects and actions, and also their status, may be represented by interface icons.

  • Check for:

  • 1. Consistency

  • 2. Transfer of work

Interface Design Prototyping

• An interface design prototype is a mock-up or a simulation of a computer screen, form, or report.

• Common approaches to interface design prototyping:

  • Storyboards

  • HTML prototypes

  • Language prototypes.

Storyboard

The storyboard shows hand-drawn pictures of screens.

Old approach

Story tell what will happen sa objects on your screen

HTML Prototype

• is built with the use of Web pages created in HTML (hypertext mark-up language).

  • Improved or upgraded storyboard

  • Sa market, it is called a web design template. 

  • Walang interaction with the backend. Nakikita lang natin yung design but walang logic na nangyayare. 

• The designer uses HTML to create a series of Web pages that show the fundamental parts of the system.

Language Prototype

• an interface design prototype built in the actual language or by the actual that will be used to build the system.

• An example of language prototype.

• You can design the form without really defining the logic. Drag and drop. 

• Low fidelity prototype (Powerpoint or Drawing, Wireframe na box box lang na layout)

• High fidelity prototype “Suggested by Sir kasi madami raw gawin” (looks like the actual

  • A detailed, polished version of a design that closely resembles the final product with accurate visuals and interactions.

• Lead fidelity

• 6 best wireframe tools to use (Figma, Moqups, Balsamiq, Uxpin, Justinmind, Visily)

Interface Evaluation

•  is to understand how to improve the interface design.

Heuristic Evaluation

Compare the interface to a checklist of design principles.

Walk-through evaluation

It is a meeting conducted with the users to walk through the interface.

• As a team, we will demo the system to the users, guide them through the system’s navigation, attributes, etc. Once tested, any comments from the demo users will be considered.

Interactive evaluation

Users try out the interface

Formal Usability Testing

It is a formal testing process to understand how usable the interface is.

• Ginagamit sa mga high end/complex systems (yung mga available na sa market)

Navigation Design (Header)

• Analysts usually must assume that users have not read the manual, have not attended training, and do not have external help readily at hand.

• All controls should be clear and understandable and placed in an intuitive location on the screen.

• Simplify Recovery from Mistakes – making “undo” buttons whenever possible.

Types of Navigation Control

Languages - command language and natural language.

Menus: A menu presents the user with a list of choices.

Direct Manipulation: With direct manipulation, the user enters commands by working directly with interface objects.

• Hybrid ng graphics and command. 

Messages are the way in which the system responds to a user and informs the user of the status of the interaction.

Input Design - Input mechanism facilitate the entry of data into the computer system

• The goal of input design is to capture accurate information for the system simply and easily.

Online Processing

• each input item is entered into the system immediately. 

  • Real time - parang sa piso fare. Makikita mo yung available seats and mag aappear agad yung total cost na babayaran mo.

Batch processing

• all the inputs collected over some period are gathered together and entered into the system at one time in a batch. 

  • Payroll - input muna yung number of hours and taxes. Pag pinindot yung compute saka palang mag process. 

Input Validation

• All data entered into the system must be validated in order to ensure accuracy.

• Input validation (also called edit checks) can take many forms

  • E.g. password validations, email validations

Output Design

• Outputs are the reports that the system produces, whether on the screen, on paper, or in other media, such as the Web.

• Outputs are the most visible part of any system.

  • Reports that are results of the processing of the system. It can be on-screen or on-paper. It can also be seen in the media such as web pages.

is to present information to users so that they can accurately understand it with the least effort.

User interface design principles (SUMMARY

Layout, content awareness, aesthetics, user experience, consistency, minimize user effort.

The user interface design process (Summary)

Use scenario development, interface structure design, interface standards design, interface design prototyping, and interface evaluation. 

Navigation design (Summary)

The fundamental goal of navigation design is to make the system as simple to use as possible.

Input design (Summary)

The goal of input design is to simply and easily capture accurate information for the system.

Output design (Summary)

The goal of the output design is to present information to users so that they can accurately understand it with the least effort.