UX/UI Design

The Fundamentals of Web and Mobile Interface Design

With an explosive growth in online applications competing for attention, users are now expecting ever increasing standards for User Experience (UX) and design. Intuitive and attractive interface designs are no longer a luxury, but a requirement if an application is to compete. For B2B this trend is still slightly behind B2C but it is certainly catching up. An effective UI (User Interface) needs to consider some basic parameters to be appealing, engaging and user-friendly. For your easy understanding we have listed them below.

User-first design

First and foremost, an application is created for a target group of users. As such, they need to be involved in the process from the start. The solution needs to be designed for them, with their goals, interests and digital capabilities in mind. That doesn’t mean that the needs of the business are not important. Each business has its own goals and want their audiences to interact with their products accordingly. Therefore, an effective UI also takes a businesses’ goals into consideration so that its target audiences can see the specific products/services/features the way the business wants them to be viewed, and in the order the business wants them to see these. A good User Experience designer can bring these 2 needs together into a single, successful UI design and experience.

Intuitive and User Friendly

An effective UI should not require users to go through a learning curve or hefty manual before they can integrate the application into their daily activities. Information should be presented logically, consistently and through reality-based concepts, and users should be given freedom to interact with the UI instinctively. A UI should always be designed for the user and they should be made to feel in control while interacting with a UI through building a better tolerance for mistakes and making way for reversible actions.

Responsive and Designed for the Platform

An interface designed for desktop, which has a bigger screen size, will not fit the smaller screen of a tablet or mobile mobile and will only make it look cluttered. A good UI design can adapt itself to the available screen size and optimize use of the available space. The way people interact with applications on desktop (keyboard and mouse) or mobile devices (touch and voice) differs widely and might necessitate adding, reducing or changing the sequence or interaction of the features of the same solution across these platforms. Forms and other complex input features will often need to be simplified for mobile devices.

For tablet and mobile applications, the design should be created for the platform it is running on. An IOS app should be conducive and meeting user expectations for an IOS environment and its users, and an Android app to its own. Even when the functionality and purpose of the app on both these platforms is the same, the design may be developed in view of their respective environments.

Binary Thinktank’s approach

We take the following approach to UX/UI design that ensures consideration of all of the above in the process:

  1. The high-level requirements and NFR's are completed in our solution architecture document along with a number of business topics such as target group(s) and business goals. The assigned designer will assess the information and brand guidelines available and will indicate any gaps that need further research. For target audience the designer will typically create a set of persona's that go into a bit more detail following interviews with a number of prospective users.
  2. After the designer feels sufficiently equipped with details, they will create wireframes for two or three of the key application pages. A wireframe is used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the designing process to establish the basic structure of a page before visual design and content is added. The solution architect is heavily involved in this process to ensure the designs are feasible within the budget and any technical constraints of the planned solution.
  3. During this process, the client provides their feedback on the wireframes and any variations received which the designer can use to fine-tune until a final set is ready to share with the target audience for feedback. Usually 2-3 variations of each key page are shown to the target audiences as this generally results in better feedback – people find it easier to choose between different options over giving feedback on a single option.
  4. All feedback is considered and select changes are then incorporated into the design. The designer then proceeds to design the wireframes for all pages of the application across any platforms that are to be supported.
  5. Based on the finalized wireframes, the designer will create proposed visual designs following the same step by step process. These designs are often placed on InVision, a prototyping tool that allows you to create an interactive version of the design that emulates the final solution without any development being needed. InVision is loaded with a range of useful features such as real-time to-do lists, version history, feedback and syncing. This make presenting your designs a far more realistic experience - including to project stakeholders or potential investors. As with wireframes, a selection of target users are involved in this review process to collect actual user feedback to be incorporated back into the designs.
  6. Once all designs have been finalized, the project document including the design history/changes on the project is updated and only then will the development process begin.

Like Rome wasn’t built in a day, designing a great UI isn’t a cakewalk as it is often made to seem in comparison to the actual development process. Remember that the success of a website or a mobile application rests on the right combination of usefulness and User Experience (UX). Efficient UX focuses on factors including the target audience, the right typography, avoidance of excessive scrolling for the users, effective content copy and a responsive design. Believing in the power of a design, we feel that an intuitive design has the capacity to sell itself during the proposal and testing phase of a solution. Therefore, as far as user or investor demos are concerned, we strongly recommend to start with an interactive design demo rather than a developed functional demo with limited attention paid to the design.