In an Application User Interface is the area through which end-user interact with the system. User Interface includes document, forms, validations, images, icons, fonts, style & animations. Let’s discuss about an employee management system (EMS) here business logics & Database are in the core. To interact with them User required User Interface (UI). User interface is the first step to operate an application. In the cause user interface is also known as front-end.
User Interface (UI) Design Strategies
To register an employee in EMS we required few data’s like First Name, Last Name, Date of Birth & so on. Until these data’s are not entered to our database we can’t considered that person as an employee. Here User Interface comes into picture. So, how we can register an employee in the System? To do so we provide a form in HTML where we have controls like input fields, dropdown lists or text areas. On form submission these controls are responsible to bring data from a user to database. With this example I think now you can understood well about the role of User interface in application designing.
Think about a non-technical user, who is completely blind about the anatomy of the application. What he know is, he know how to play with User Interface. Better user interface brings better user experience. From a developer point of view it may user interface is less prior then core development but in a customer point of view user interface is the application what he/she wants.
So, when User Interface directly interact with Customers & their requirements I can say we need sufficient planning to develop user interface. Of course to design the core we need planning but in this session let us explore more into UI development process.
According to my experience I divided UX + UI development process to 9 stages.
SDLC Lifecycle Phases
- Requirement Analysis
- User Analysis
- Blueprint & Block Diagram
- Customer Approval
- FSD Preparation
- Prototype
- Customer Approval
- Implementation
- Testing
Requirement Analysis
This is the initial phase to collect information about Customer requirements. According to this analysis we can proceed further stages of development. In this phase basically plenty of questions arises. Why they want to design a software? How they are managing their System? Which problem they need to shut out by implementing software? What are the modules they required? Which departments they targeted to connect? Like so on…
Keep remember with latest methodologies Requirement Analysis can happen in between the designing too. But in the initial phase we need to collect as many information as we can. This helps to generate a clear picture about the application Customer wants.
User Analysis
To prepare a successful software it is mandatory to know its users. User analysis gives picture about the level of access, types of users, role & permission info. For an example if your customer required to design an Employee Management System here users can be Employees, Administration & Super Admin. Depending upon the facilities or modules in your software you need give access & roles for type of users. During this phase try to get a clear picture on type of users & their level of access. In design phase correct user analysis saves time & reduce the chance of re-work.
Blueprint & Block Diagram
Developing a Software in Expensive. Once you are clear with the requirements & its users don’t jump directly to designing. It may during requirement & user analysis there can be a communication gap between you & your customer. If you are going to design the software which is out of scope it will take more man power & investments. That’s why before developing codes prefer to prepare blueprints & block diagrams refer to your analysis & customer requirements. In blueprint design each & every form clear with type of controls. To architect the flow use block diagrams. Many time customer wants a specific look & feel. In this case blueprints are very useful.
Customer Approval
Blueprints & Block Diagrams are enough to understand the goal of application. Before proceed ahead towards real designing present this to your Customer & take approval from them. In this way you will get confirm that what information we collected during analysis phase these are correct & genuine. In-case customer required any changes it can happen here. So, in feature this process will save unwanted re-works & resource utilization.
FSD Preparation
After completion of Customer Approval process you have a clear picture about the functionalities customer required in their application. To keep track of them before development prepare Functional Specification Documents (FSD). FSD helps in three major cases.
- If some of your team member left the job others will not depend on his/her absence. At the same end if a new employee join your team he/she can know about the project by referring these documents.
- FSD makes development easier.
- During project documentation & help manual FSD helps to guide & saves time.
Prototype
In UI development Prototyping is the key area. Before developing a functionality rich application it is wise to design the skeleton first. During the phase of prototyping first prepare color palates & PSD files for feature reference. Depending upon the PSD files code your HTML templates. Maintain a Single CSS file for your common styles. Then if required create separate CSS files depending upon your templates.
Customer Approval
Once your team is completed with Prototyping it is wise to present a demo to the Customer & take approval from them. So that in feature while you do start designing the real application you will not miss out anything. In-case any changes you found after demo make them fixed in this phase only.
Implementation
Here I am not talking about the business logic or database related implementations. As we are discussing about the UI development process in this phase let you complete the dynamic parts of your UI templates. Here you can make your templates responsive, implement validations, animations or can bind static data’s to your controls.
Testing
Before Delivering the UI templates to other division for core development ask your QA engineer to test the UI templates well. In this way we can divide testing into phases. Which help to produce more quality software’s. In case the tester found some issues with your UI stuffs fix them in high priority or else freeze the code to release.
