UI design and analysis

UI Models:

There are four kinds of UI models which are important with respect to user interface design and analysis:

• User Model

• Design Model

• Mental Model

• Implementation Model

1. User Model:

The user model tries to identify the target users of the solution. Are the users novice or are they knowledgeable people? These factors in true terms describe the overall user experience which can be an important factor for business growth. Thus, while developing an application the developer should consider the users perspective or purpose and model in a way to increase the ease of understanding and simplicity.

2. Design Model:

The design model should try to conceptualize and compile the information which was the outcome of the User model. It should be a balance of four factors: the content, the interaction, the user goals and the business goals.

3. Mental Model:

This is probably the most important model of UI design. The mental model is what a user thinks they know about how to use an application or a webpage. Mental models are built in the users brain and people refer to them to make their lives easier. Therefore it is necessary that your software must match the existing interaction pattern to make user more accommodate and less anxious while using your software.

4. Implementation Model:

The implementation model represents how a system (application, service, interface, etc.) works. It is often described with system diagrams and pseudocode to be later translated into real code. It is shaped by technical, organizational, and business constraints.

UI Design Process:

UI Design Process consists of Interface animation, visual elements, screen layout, and content. It's essentially a graphical representation of an app. During the UI Create Process, we have to design the product based on the preferences of the clients.

Key Steps for UI Design Process :

1.Product Definition:

The first part of the user design process is product definition. The team in charge of this will gather user requirements depending on their business context.

It is critical since it is during this stage that the true extent of the product and its existence is realised.

The Design Team, the Business Manager, and the Product Manager are all participating in this phase. During this step , the entire staff should consult with clients. Examine their requirements within the context of their business.

User Personas, User Stories, and Use Case Diagrams are all important deliverables from this phase.

2. Research

A designer's most important tool is research. For the current customer proposal, the designing team investigates how the current system functions. The basically there are three major Functions at this stage:

• Know what the competition is all about.

• Examining your current domain thoroughly.

• Examining rival strategy to see what happens.

Understanding the newest UI trends, design concepts, and guidelines should also be part of the research process.

3. Analysis

Use the information gathered during the research phase in this step. Create hypothetical personas and experience maps using the information provided.

• Hypothetical Personas: 

Creating hypothetical situations allows designers to learn more about the many types of people who will use your product. It enables for an accurate portrayal of the final product to be depicted. After delivery, the design team will be able to work out how it will appear.

• User Experience Maps:

 A user experience map depicts the movement of users through your final product. All of this is accomplished through effective interactions with the customer throughout the product definition process, using visual representations.

4. Design

We finish up bringing life to the concepts we collected in the previous three processes throughout the design process.  It's time to start working on the final visuals. In this step, the design team will put the final design into action.

The following are key outcomes of the design phase:

Sketching: Sketching is the first step in the design process. Designers frequently create hand-drawn drawings to visualize concepts in simple ways. After the drawing phase, the UI designers might commit to a certain solution.

Creating wireframes: A wireframe is a visual representation of the page hierarchy and product aspects. The backbone of each product is its wireframe. It's also known as the design's skeleton. It's largely about the end product's overall appearance.

Making Prototypes: Prototypes focus on the look and feel of the UI/UX product being designed. It's all about the experience of interacting with others. The effect of a prototype is similar to that of a simulator.

Creating Design Specifications: User flow and task flow diagrams are included in the design specification. It describes the UI product's overall operating and stylistic requirements. It explains how to build exceptional user experiences by describing the procedures and graphical aspects involved.

5. Validation or Testing

Testing is the step that establishes the final product's overall quality.  The testers write comments on what needs to be changed and submit them back to the respected team to be corrected.

There are several elements to consider while appraising your finished work. 

The following are the details:

Is the system simple to use?

Is it adaptable and simple to use?

Is it effective in resolving the customer's problem?

Is it reputable and entices people to return every time they want your service?

For creating amazing UI interfaces, one requires to follow a systematic and organized approach. A UI design process strategy will help you in achieving the same.

The entire design team will be playing their part in the process.This is one of the great ways to preserve your present clients and appeal to new ones on this surprisingly aggressive world.

User Interface design steps:

User Interface Design

User Interface Design basically focuses on what users need to do and it ensures that the interface has elements that are easy to access and understand and also use to facilitate those actions.

 

 Interface Elements

Users are becoming familiar with the interface elements  in a  way that they  try to be consistent and predictable in your there choices and their layout.

• Input Controls: date field, buttons, text fields, list boxes, toggles, checkboxes, radio buttons, dropdown lists

• Informational Components: tooltips, icons, message boxes, modal windows, progress bar, notifications,

• Containers: accordion

• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons

 

Many times when multiple elements are appropriate for displaying content.  When this happens, there are important trade-offs. 

For example, sometimes elements that can help to save you space, puts more burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be. 

Target Object:

A target object in the context of a User Interface, It can be an interactive element such as a submit button, a hyperlink, and an input field in a web form. The idea should be quicker so that you can reach a target object, the more convenient and easy way to use.

Source Object:

The source object is a non-visual control, whose properties defines the data need to be displayed by the accompanying visual control. The source control includes a designer tool which helps you to define this schema. The tool also gives you the option of importing the schema from an XML schema file, or from an ABL source file.

User interface analysis elements : 

 User interface analysis elements include :

•   User analysis

•  Task analysis and modeling

•  Analysis of display content 

•  Analysis of the work environment

 1. User analysis : 

The goal of the user analysis is to understand the users and their uses. Understanding tp the users and their use can be accomplished as follows: 

– User Interviews, sales input, marketing input, support input.

– Question to better understand a user of a system. 

Eg. Are users trained professionals, Are users trained professionals, technicians, clerical, or manufacturing workers? What level of formal education does the average user have?

2. Task Analysis and Modeling :  

  The goal of this task analysis is to answer the following questions:

 – What work will the user be going to  perform in specific circumstances?

   Here  Use case techniques are used.

 – What type of  tasks and subtasks will be performed as the user does the work? 

    Here Task elaboration is used. 

 – What specific problem domain objects will the user manipulate as work is performed?   

   

Object elaboration.

 – What is the sequence of the work tasks —the workflow? Workflow analysis 

 – What is the hierarchy of tasks? 

Here Hierarchical representation is used.

Task Analysis and Modeling : 

Techniques :

• Use case - When used as part of a  task analysis, the use case is developed to show    how an end user performs some specific work-related task. From the use case, it is possible to extract tasks, objects, and the overall flow of the interaction. 

• Task elaboration – Elaborate approach assists in understanding the human activities the user interface must accommodate. Can be done in two ways. First approach is to derive a set of tasks that will accommodate the user model, design model, and the system perspective. Second, use stepwise elaboration to elaborate the major tasks into subtasks.

• Object elaboration – From use cases and other information extract the physical objects. These objects can be categorized into classes. Attributes of each class are defined, and provide a list of operations. As the design gets elaborated, the details of each operation are to be defined.

• Workflow analysis - it  can be represented effectively with a UML swimlane swimlane diagram (a variation on the activity diagram). 

• Hierarchical representation - The whole  hierarchy is derived by a stepwise elaboration of each task identified for the user.

(3) Analysis of display content : Display content which can range from reports, graphical displays or specialized information. During this interface analysis step and  the format is considered.

(4) Analysis of the work environment : The user interface is  for a computer-based system, but in other cases , noise may be a factor, a keyboard or mouse may not be an option. The interface designer may consider these factors.