Site   Web

June 25, 2015

UI/UX User Interface Design in Web Development

Website design has undergone significant changes over the past decade, with many new concepts important to the Web development lifecycle being introduced. Web developers must create websites that are more flexible and responsive in nature so that designed websites can be rendered effectively across multiple user platforms including laptops, Smartphones and tablets.

With such challenges, many developers have embraced the concept of responsive design for designing and developing websites. Responsive design has played a vital role in bringing UI/UX design techniques to the forefront of website design.

ux-1

It is essential to choose a Web design service provider with proven credentials in UI/UX Design implementations.

The Importance of User Interface Design

A site that was considered at the forefront of technology a decade ago would be left in the dust now because users expect so much more from their online experience. Users should have a comparable experience on each of their devices and your site should be able to take advantage of bigger screen sizes and faster connections when they are available. With standardization of touch screen interfaces in iOS and Android, a user can expect a website to perform in a particular way. When your site does not perform in the way that users expect, they will become frustrated and may leave your site for good.

Often, when good user interface and user experience design has been employed, it is invisible — the site has gotten out of the way. Users find that your site works exactly as they expected it to, they are able to get to the information they want quickly and they are able to perform the important actions like making purchases without having to go through a convoluted process.

Before getting into UI/UX concepts in detail, it is important to be aware of the Web design and development lifecycle and the role played by UI/UX Design as part of this cycle.

Website Design and Development Lifecycle

  1. Planning — This process includes activities like understanding the business objectives, performing a stakeholder analysis and arriving at the scope of work to be performed.
  2. UI/UX Design — This stage include activities like user persona creation, task creation and wireframing and prototyping, which we will go into more detail below.
  3. Site Design — Includes steps like designing multiple site concepts and designing the supporting graphics required for building the interface.
  4. Website Development — During this stage, test instances are created and the entire front end coding is done that integrates the different Web pages. Data from the backend database and messages from various messaging components are tied in with the front end.
  5. Testing — In this stage, functional testing is carried out to test website functionality and integration testing is performed to test the behavior of the website when interacting with third-party components. Stress and load testing are included as part of testing lifecycle once the website becomes stable.
  6. Website Deployment — The main activities that form part of this phase include migration, deployment and installation testing.

UI/UX Web Design

It’s clear that UI/UX design is highly important because it comes straight after the initial planning of the site. The User Interface/User Experience (UI/UX) Web design principle is centered around four important stages, which we will cover in further detail. These are persona definition, task definition, wireframing and mockups.

ux-2

1. Persona Definition

Here the term persona refers to user persona — the profile of a particular section of users who will be using the website. Personas help in creating fictional users who closely resemble the actual group of users.

A number of user attributes are collected during this phase in order to establish a user persona that closely resembles the actual real world user group. Some of the major attributes that are collected to establish the user persona include age, occupation, sex, hobbies and preferences.

With user personas, one has to keep in mind the core target audience group and their likely behavioral traits.

2. Task Definition

The next stage in the UI/UX Web design phase is the task definition phase. Task definition is usually performed in conjunction with the user persona phase. Based on the user preference data collected during the persona definition phase, the likely actions to be performed by the user are defined. This includes the type of searches to be performed by the user using the website and common navigational behaviors of the users. The type of devices used by the identified persona to perform these tasks is also defined during this phase.

Once the tasks are defined, the related tasks are grouped together to form a particular major path taken by the group of users. The path taken differs among user groups, as some users would like to browse through all the individual pages in the website, while some users prefer to use the search functionality provided in the landing page.

3. Wireframing

Wireframing is an important part of the UI/UX Web design process as it builds the first visual representation of the ideas conceived. Wireframing enables Web designers to translate their thoughts and ideas into a visual interface. Based on the likely tasks to be performed by the identified persona, wireframing enables designers to visualize the screen-to-screen interactions. Wireframing enables Web designers to illustrate the interface concept.

In order to make wireframing a foolproof concept, developers also have the option of sketching before getting in to wireframing. Sketching can be considered as a rough or an unrefined form of wireframing. The specifics of the user interface at the pixel level are not provided in the sketching stage. Only during the wireframing stage, designers get to have a clearer view of the visual interface in the form of pixilated grayscale widgets. Though it lengthens the development lifecycle, including sketching before wireframing helps designers to refine their concept. Just by taking pencil and a paper, designers can sketch out the different elements that are available for the user group.

Wireframing on the other hand is performed using a standardized tool. The tool will help the designers in sizing and placing the various elements in a particular screen. The main purpose of the wireframe is to finalize the order, structure, layout and navigation of the different objects available in the interface. Wireframes are basically done in black and white.

Designers have access to a wide range of desktop and online wireframing tools. For designers who prefer to work on the Mac platform, Omnigraffle is an easy-to-use tool that enables designers to create diagrams, graphics and page layouts of the website in progress. iRise is another software program that specializes in creating wireframes. It mimics and simulates workflows usually used in business applications. Axure is another wireframing tool that can be used to create and test wireframes.

4. Mockups

Mockups can be considered an interactive version of the wireframe that come with all the colors, graphics and special effects added. Mockups are the closest version to the actual Web page layout and content seen by the users when the website goes live. In addition to depicting the visual elements in the interface, mockups also contain the text and the different messages that appear dynamically in Web pages.

There are quite a few tools available for designers to create real-time mockups. Some of the popular tools available include Mockingbird, HotGloo, Mockflow and Protoshare. Among the available tools, Protoshare enables the different groups or stakeholders participating in the project including the marketing department, managerial staff, Web designers and the client to participate in the mockup design process. The majority of these tools come with a real time collaboration capability that enables developers and designers to collaborate with each other during the course of the mockup design process. HotGloo is an online mock up design tool that is used for designing mock ups closest to the final website pages.


avatar

Kim Murphy founded Designz23 Marketing and Development eight years ago, and has built and managed hundreds of great websites ever since. His industry publications are known to be among the best in the Web design and marketing industry.

css.php