User Interface Development in SDLC

“User Interface” or UI Development is not a new term in software development life cycle. Starting from a small web site development to application or software development, User Interface plays a very important role. Many people believe, UI development is just about coding HTML, CSS and Java-Script but UI is way beyond these technical terms.

UI Development is not limited to Website development but extended to any kind of application development including client server. Even in wireframes and Prototyping we make use of UI technologies.

A user is not going to experience a software or website based on the backend technology used, but based on the User Interface and its experience.

This topic is intended to understand

– The role and importance of User Interface development in the SDLC
– How UI Development can be catered in each phase of SDLC starting from the Requirement gathering phase.

Introduction

Product development is the process of designing, creating, and marketing an idea or product. The product can either be one that is new to the marketplace or one that is new to a particular company, or an existing product that has been improved. In many instances a product will be labeled new and improved when substantial changes have been made.

Today Product development is becoming a need for every business, from a simple website to ecommerce websites, banking domain to mobile technology every business needs software or a product to communicate with the users.

We can categorize the product into this broad bucket

Consumer Products

Public Safety,

Rugged Handheld Computers Utilities,

Mobile & Fleet Management

Mapping & GIS,

Embedded Systems

Portable Devices In-Vehicle Navigation & Telematics Tracking,

Instrumentation,

Security

Engineering & Construction

Construction

Construction Asset Management

Marine Construction

Mining

Surveying

Infrastructure

Agriculture Solutions

Precision Agriculture

Guidance

Flow and Application Control

Water Management

Information Management

Advance devices

Defense

Precise Timing

Each of these products needs a User Interface through which a user can accomplish their tasks. Having the best user interface provides the best customer experience and today’s competitive market-place demands that companies maximize the ease of use for their customers.

All product development goes through a similar development lifecycle, starting from requirement gathering to testing phase. Unfortunately, in the development cycle of most of the applications, the user interface design does not begin until most of the development has been completed, and is usually starved for time and resource

The results are hardly positive. Either the UI design is severely affected by assumptions made during the application development or additional resources are added to rework or completely re-program all or part of the application to accommodate new design. This leads to problems like design compromises, delay, budget overruns etc.

Given this the most effective strategy is to integrate and design the UI parallel to each phase of development lifecycle

In short, integrating UI design in the development process have several businesses benefits as follows:

Lets look at the UI design process and how we can integrate it in all the phases.

User Interface design process

User interface development process can be categorized into 4 phases as below:

– Research and Analysis
– Design and Branding
– Prototype Development
– Production

This structured process can maximize communication between the company and its clients, lower development costs, and most importantly deliver the best user interface design.
This process is flexible and modular, thus allowing client to determine which phase are appropriate for their needs, and can be applied to both the creation of user interface for new applications as well as enhancements of existing applications.

2.1 Research and Analysis

Process:
In traditional Research & Analysis phase, two categories of information are gathered and analyzed by the user experience team.

1) Information about the users of the application
2) Information about the application itself

This establishes the context for User Interface design and this context informs the entire design process.

Additionally, during this phase as a part of UI development, UI developers can start researching about current market trends, UI technologies, and competitive analysis. This research can help the UX team during the consecutive phase of SDLC and both UI and UX team will have clarity of things possible and impossible and LOE (level of effort) required during development.

For existing applications the Research & Analysis phase also determines the strengths and weakness of current UI.

How:
The user data is gathered answering the following questions

– Who the users are?
– What are their skill levels?
– What are their qualitative expectations for the application?
– What task do they need to perform with this application?
– Under what environmental conditions will they use this application?
– Under what time conditions and constraints will they use this application?

The application information is gathered answering the following questions

– What problem is the application intended to solve?
– What are the functional purposes of the application?
– What are the operational purposes of the application?
– What are the marketing purposes of the application?
– What are the user interface specifications of the application?
– What are the software, hardware and graphical requirements to create and deliver the appli-cation?

The User Interface trends can be gathered answering the following questions

– What are the current UI trends?
– What are the current UI design patterns?
– Which are the latest tools and technologies being used?
– What tools and technologies are our competitors using?
– Pros and Cons of using any latest technology for the current product?

During the design and branding phase, User Interface design is created that addresses the specific needs identified in the research & analysis phase and creates, revise or leverage the applications brand.

Involving UI design into Design phase

During design phase UI developers can work closely with the UX team to define the User interface (Wireframes, Visual design). A User Experience team may think out of the box while creating wireframes and visual design, but may not be aware of challenges, possibilities and limitations. Involving UI developers in this phase may ease the process, as UI developers understand the technologies and possibilities. This will reduce the last minute efforts from the UI developer’s side and additionally both the UI and UX team, as well as client will have a clear expectations set.

Deliverable:

– A discussion of the design philosophy and strategy used to create the UI design, including an explanation of how research brief informed the UI design
– A comprehensive set of screen layouts illustrating every part of the UI design
– Key screen that present the visual design and branding for the application.

Wireframe:

Wireframes is presented as a comprehensive set of screen layout consisting of Black and white sketches of every screen in the application. At this point the visual and graphic design processes have not yet begun.

Wireframe is an important step; because it helps the clients focus on how used will interact with the application rather than become entrenched in relatively subjective issues such as color or visual style. It enables us to postpone those and other subjective issues

By necessity this is a cyclic process, and once the screen layouts have been approved, a visual design is created that is informed by the UI design.

Visual design

Visual design process begins with the branding of application.

2.3 Prototype development

Process:

Using the approved design document as blueprint, prototypes of the User Interface designs are created. Based on clients needs the prototypes are created using HTML or flash. Prototypes can be low fidelity or high fidelity based on user needs.

The scope of the prototype created during this phase is tailored to the specific application and the user testing requirements. Some applications require a comprehensive click through or working model of the entire interface, while others only require a prototype of core functionality.

The prototype serves as

– A communication and review tool for the client
– An implementation guide for the software developer
– A user testing tool
– A working prototype enables clients to see how the user interface will perform without having a commit programming resource

Another benefit to a working prototype is that it dramatically improves the communication among UI design, marketing and application development teams, as well as any other key stake holders since marketers, designers and developers often think and use language differently, having a functional prototype leaves fewer issues open to interpretation or misunderstandings

Prototypes are infact an opportunity to identify any remaining user interface issues. Should there be design document and prototype are modified to incorporate changes prior to final approval.

Once the prototype is approved, development team can work to implement new user interface design quickly and efficiently without interrupting the development process to correct design is-sues.

The utilization of prototype also has significant marketing benefits. Since the prototype closely stimulates the actual application, extensive user testing can be one before the programming starts, which also produces significant cost savings. Additionally positive user feedback is a validation of design, confirming that the application delivers a user experience that meets or exceeds customer expectations. This positive feedback can be used for both internal and external marketing purpose, by building confidence in the rollout and promoting user adoption.

Deliverable: Interactive prototype of the new user interface

2.4 Production

A proper UI and UX team collaboration and Integration of UI design from the starting of SDLC can reduce lot of efforts and confusion. Also it can help in successful and timely delivery of the products in any company without any slippages and can increase customer satisfaction. Additionally it can help building ongoing relations with our clients.

Stay tuned for an interesting blog soon on “Ethnographic and demographic influence on design “

PRAYAGA

SHYAMALA

A little something about me!

My name is Shyamala pronounced as shaa-ma-la and I am a UX evangelist with 19 years of experience as a UX designer with hybrid skills of UI and UX. I have experience in UX and UI designing on both mobile and desktop applications and have been part of designing some award-winning mobile applications.

​

I am a civil engineer by education and before moving into user experience I worked as an architect with a construction firm for 2 years. My passion for design and building great things for users pushed me into the UX domain. I am a self-made UX designer with no formal educational background into UX, but my passion helped me enter and succeed in user experience.