Principles of good interface design. And what do programmers have to do with it?

For the last 8 months I have been mentoring designers on a mentoring platform. Most often, aspiring designers come to me after year-long courses in online schools. Everyone has the same problem – there is a lot of theoretical knowledge that is not clear how to apply it in practice. In this article I want to describe the key principles that I advise beginning designers to pay attention to.

Let’s ask more questions

The question “why?” is where a designer should begin any task. You must understand the user or business problem you are solving with your design. The question “why” is a must-have in your communication with a product or business customer. Don’t be afraid to seem stupid; the desire to get to the bottom of things demonstrates your professional awareness. If you need more information on the task, for example, you are designing a navigator for motorists, but have never driven a car – no problem, interview at least 5 of your friends and find out how they currently use navigators. You’ll be surprised at the amount of insight you’ll gather from a little research. At the beginning of working on a task, it is important to get as much input as you can get your hands on and train yourself to consciously design – the designer should not just be his hands. Be proactive.

Designer + programmer = strong friendship

It is extremely important to build communication with the development team. Without our beloved programmers, our design would now be gathering dust in a frame on the bedside table. I managed to work in large IT companies on different products and I can say that most often designers behave separately and communicate on work issues only with product managers and other designers. Fatal error. The absence of a “designer + programmer” connection leads to the fact that the designer brings to the table a solution that is expensive to implement, receives a share of criticism and perceives it as something personal. After several such meetings, the offended and demotivated designer moves even further away from the programmers, which affects the speed and quality of features implemented in the future. Every time I join a new team, I ask to be separated from the designers closer to development – this makes it possible to quickly discuss all the technical nuances at the design stage and involve programmers in creating a common design solution.

Testing design solutions

Try to test your solutions with UX tests. Unfortunately, a culture of research is not always found even in large IT companies. If you don’t have a UX researcher on your team, take things into your own hands – use good old corridors or test prototypes on your friends and acquaintances. Thanks to feedback, you will improve the product, receive an evidence base for your decisions and improve your hard skills.

Feedback from designer to designer

Don’t be afraid to show your solutions to other designers. Feedback from your colleagues is also a point for growth. Beginning designers are afraid of criticism because they are not confident in their work. Don’t be afraid to make mistakes, because without feedback you will never understand what you did wrong. It often happens that junior designers respond to my feedback with “and this is not the final layout, but a draft, of course, I know about it…” – I always laugh to myself and understand that a person is afraid to show his incompetence, but in vain – making mistakes is important and necessary.

Don’t forget about accessibility

Check your interface elements for accessibility – font sizes, contrast of design elements. Practice shows that designers neglect this and select element colors and font sizes by eye. If we talk about contrast, I use a contrast checker from Coolors — I advise you to add this tool to your browser tabs so that you always have it at hand. Recommendations for fonts can be safely taken from Apple guidelines. There is also a simple rule: the larger the font, the easier it is to read the text, so don’t make it small and forget about the Light style of fonts – this style was invented by Apple to market the new Retina screens, and not for mass use.

Job Stories are useful

The Internet is full of materials and articles about the JTBD framework, so I will try to touch only on the key points and show examples.

Jobs to be Done (job to be done) is a methodology that helps the designer understand what needs and problems users are trying to solve with a particular product.

Simply put, this framework allows you to think about design in terms of using a product to fulfill user tasks and needs. Understanding these things will allow the designer to create a useful and effective product that will meet the user’s goals.

Creating jobs requires two things: structure and in-depth interviews/surveys. Let’s say you’re designing a clothing store from scratch, but you don’t know where to start. Survey your friends and acquaintances, find out how they now buy clothes online and offline, you can even use your experience to generate jobs.

The job structure consists of three values:

  • Situation

  • Motivation

  • Expected outcome

Examples of jobs for an online clothing store:

  • When I want to understand what clothes look like in real life, I want the store to show pictures of the clothes on models so I can understand how they will look on me.

  • When I realize that I need to update my wardrobe, I want the store to offer me recommendations based on my past purchases and preferences so that I can easily find and buy new clothes that match my style.

  • When I’m on a tight clothing budget, I want the store to let me choose clothes that fit my budget so I can update my wardrobe.

  • When I’m about to go on a trip, I want the store to offer me the right vacation clothing so that I feel confident while on vacation.

  • When I’m shopping for the right clothing size, I want the store to give me guidance on how to choose the right size so I can buy the item I like and avoid returns.

Each of these jobs is a potential feature for the product that will help fill a user need. This is a particularly good tool for beginning designers who have not yet learned to think from a problem and need, so in the initial stages I advise you to use JTBD when designing each task. I will help more experienced job designers to unravel tasks with complex scenarios.

First UX, then UI

Think over the logic and functionality of your script first and agree on them with the customer before you start working with the UI. This is where wireframes can help you. Practice shows that the UI at the stage of script approval is more likely to interfere and draw the attention of the approving party. Use the 50 shades of gray rule and pull back when you want to add fillets – wireframes should be schematic, but using real or near-real content.

Principle of 3 stages in design

The feature design process can be divided into 3 stages, which are suitable for any interface designer.

  • Concept – at this stage, having collected all the input data, you sketch out the UX and UI of your script. You lay down logic and functionality, work with the composition and accents of your interface. At this stage, your design is agreed upon with the customer.

  • Routine — here you put things in order in the layouts, work with the grid, layouts and tweak the UI interfaces to the final state.

  • Package — preparation of layouts for transfer to development. Use the arrows to assemble the Screen Flow for your script and write screen explanations to help the developer better understand your intent. It’s even better if you ask the developers in what form they want to receive your design – it won’t take you much time, and the programmer will do his job comfortably.

Results

Here I have given the basic principles that I recommend using in the daily work of a UX/UI designer. If you have any additions or observations, I will be glad to see them in the comments.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *