What is the difference between UI/UX designer and programmer?

UI and UX design present different aspects of creative flow for digital products. Basically, UI design aims at creating an effective and attractive user interface while UX design aims at providing a positive user experience. Interaction with a product via the user interface is a part of user experience, so we UX design as a creative field is broader and includes UI design as its integral part.

Work on information architecture for a website UX

Working on the UX and UI for a digital product such as a website or mobile app, designers have to concentrate on such core aspects as:

• usability (the product is convenient, clear, logical and easy to use)
• utility (the product provides useful content and solves users’ problems)
• accessibility (the product is convenient for different categories of users)
• desirability (the product is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat).

UI design of some screens for Home Budget App

Programmers or developers are people who actually build the website or mobile application planned and designed by UI/UX designers. They breathe life into the plan, with the code they create the live product which users can actually apply to solve their problems and satisfy wishes. Programmers transform the structure and visual performance thought out and created by designers into the real interface.

How interfaces look from the programmer’s point of view

Therefore, to see the difference, we can apply the metaphor of an actual construction site:

– UX designers are architects who come up with the general concept, its structure and the flow of interactions as well as a variety of factors which influence positive or negative user experience (in case of real building it could include transportation, quality of air, availability of shops and entertaining points, educations and sports facilities, neighbors, etc.).

– UI designers are architectural visualizers who find the best solutions for visual performance of the object corresponding to the style, the environment, user’s expectations, and aesthetic needs based on the already agreed architecture, structure, and core factors of interaction.

– Programmers are actual builders who create the final object in reality. As well as on the building site, they have various specializations: some are good in creating the foundation, others know how to realize visual features made by designers, and some of them work out effective interaction with this object in particular environments and for new requirements which can arise later.

Do UI/UX designers need to know computer science and programming to create top-quality user-friendly designs?

This is the question in which the terms should be clearly defined.

Computer science in its traditional understanding is a broad comprehensive study including theory and practices for making and using the computers (now it can also go further to other kinds of digital devices and gadgets). It is often characterized as the scientific and practical approach to computation as well as study, exploration, and automation of diverse operations with data. Therefore, the person with a major in computer studies is usually a specialist in the theory of computation and design of this sort of system and hardware.

In this perspective, yes, knowledge of computer studies is a great basis for creating problem-solving and user-friendly interfaces. UI/UX designers are professionals dealing with much more than just the looks of a website or an app: they think over the logic, transitions, usability, accessibility, emotional and aesthetic appeal, data presentation and lots of other things forming the whole user experience. Whatever is the way to get this knowledge – higher education, courses, apprenticeship, self-education, etc. – it underlies the necessary basis of knowledge which allows a designer to understand human-computer interaction for appropriate and effective design solutions. The knowledge of computer science is an important factor in being a competent designer of modern user interfaces.

As for programming, the situation is different. There are, basically, two camps of extreme positions. One side claims that programming/coding is the absolutely vital thing to know and you cannot provide really efficient UI/UX without knowing how to code. The other side believes that the knowledge of programming kills creativity in design as in this case designer is limited with the rules, standards and restrictions of development. Both positions are supported by numerous articles and discussions and both somehow make sense if you think about the issue in the perspective of real design projects.

On the basis of our team experience, it’s easy to state confidently: you definitely CAN be a competent and successful UI/UX designer for mobile and web with no background or major in programming.

Basically, the task of UI/UX designer is to analyze the target audience and their needs, to make a research, to create an efficient layout and well thought-out system of transitions, to wrap it in an attractive but highly usable and clear visual design and to test the solutions. UI/UX designer is not a developer: they work on the same product but from different sides, as well as for example a writer, an editor and a publisher work differently on the same book. However, it is obviously pleasant for developers if a UI/UX designer is able to produce designs that consider at least the basic limitations and points of programming and coding.

You can find a great bunch of successful experts in app and web design who have never had anything in common with the sphere of coding and development and provided great design solutions with a very high level of usability. Nevertheless, in the case of high-level specialists, it’s impossible to say that they are totally out of the issue. Designers, who are keen to create viable product designs, usually tend to get acknowledged with the general understanding of development basics. That really supports the designer in providing effective design as possible, considering all the stages of its creation and implementation. However, it doesn’t mean that without this sort of knowledge it’s impossible to create good designs. Moreover, if designers work in a team with developers, they can create designs without knowing how to code even easier as they are supported by developers who control the process from the perspective of coding.

The happy medium should be found in this issue without any extreme positions. If designers tear themselves too far away from development reality, they risk losing viability of their designs and could end up having a great deal of amazing and terrific concepts none of which will be implemented in real products. On the other hand, if designers concentrate too much on the limitations of coding, they risk becoming unable to think out of the box and provide original design ideas. Keeping a wise balance provides harmony.

So, to sum up, a person can become a successful UI/UX designer not knowing programming and development; however, this kind of knowledge can be supportive if used wisely.

Working on interfaces created from the first line of design to the real digital product, like Upper App and Toonie Alarm, we find thoughtful and organized teamwork the most effective workflow: UI/UX designers, developers, content, and branding specialists have to be involved in the creative process from the very beginning and combine their strongest sides into one product. The wise delegation of tasks works more quickly and effectively than the attempts of one person to explore and cover everything. And this sort of teamwork lets designers and developers share their knowledge and understand each other’s decisions for the sake of good outcome solving users’ problems.

Upper App

Originally written for Tubik Blog
Welcome to read us on Quora

Сообщение FAQ: Should UX Designers Know Programming and Computer Science? появились сначала на Design4Users.

So, the original Quora question we are answering today was the following.

Why is branding essential in the user interface?

Let’s start with clear definitions of the core term here to specify what will be meant behind it in the answer. So, branding, in general, is the set of marketing and psychological techniques and steps aiming at the promotion of a product, service, persona, etc. first of all via setting a brand.

Brand in this case means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market. This image can be created in tons of diverse ways which can be visual, verbal, touchable, etc.

In terms of graphic design assets, branding can be realized via a set of visual elements, the most widely used of which are:

• logo;
• brand colors;
• typography: lettering as a part of the logo or full representation of the logo (wordmark); types and fonts used via digital as well as physical products representing the brand;
• graphic elements such as, for example, illustrations, design of letterheads, business cards, and other print assets;
• templates for corporate presentations, etc.

Interface for Ribbet project featuring logo lettering

In the discussed question covering the aspect of branding in UI design, branding supposedly means, first of all, a set of visual elements defining brand style which can be applied to the interfaces such as logo, typography, brand colors, and the like. All of them together are a powerful tool for creating visual recognizability of the product as well as its style. Being based on the analysis of target audience and marketing/ customer research, branding in this sense plays a vital role in product promotion as visual perception is very fast and easy for most people, much easier than reading the text and much more memorable than listening to speech.

Path 1: From branding to UI

Answering on the basis of the practical experience of work in UI/UX projects accomplished by studio team, we could confidently say that branding IS essential in a user interface, especially in case if you want to use the interface as the additional flow of user attraction as well as the way to increase brand awareness. If you take the time on proper marketing and user research, define your target audience, analyze competition and on the basis of all that data have branding elements, first of all, logo, created by a professional designer before launching the process of UI design, your product immediately gets higher chances of getting recognizable faster and easier.

The reason is simple: UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides a more natural and harmonic feeling of the brand in general and the particular interface as an integral part of this brand.

Providing you with practical examples giving real experience, we could mention case studies by Tubik Studio designers on branding and UI design process for the Saily App and Passfold. Working on branding style and then UI solutions for e-commerce and mobile application, studio designers understood how beneficial strong mutual support between branding and general interface design can be for the product and its further promotion. Practice proved that this strategy was completely right. Welcome to run through the details and graphics of the design process following the links below:

Case Study: Passfold. Designing Logo

Case Study: Passfold. Designing UI

Case Study: Saily. Designing Logo

Case Study: Saily App. Designing UI

Both cases have proved that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was an effective strategy. It is important to remember that the user interface of an application or a website is not just a sort of static or moving image – it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as a general stylistic concept.

Path 2: From UI to branding

One more important question to ask here on the basis of everything above mentioned is the following: is it possible to create an efficient UI design without particular branding elements designed beforehand?  The answer is certainly positive. Yes, it’s possible and there are lots of examples. However, in this case, UI will not work on brand recognizability as effectively as if with branding elements included. These two different powers of attracting and engaging customers will somehow work separately, not supporting each other.

However, if UI is really amazing and the product is useful, in case it gets popular there can be a reverse process: UI itself becomes the strong element of branding due to its popularity and determines all the further solutions on branding design. For example, it happens that customers cannot afford the design of branding and UI design for a product simultaneously, let’s say when it is a startup with limited budgeting. Certainly, they will start with UI design and the general stylistic concept will be accomplished right in the process of interface creation out of thin air, not being based on previously made decisions about branding and promotion. If the product, being useful, usable, and well-designed, becomes popular and at the later stage its owners decide on creating particular graphic assets for branding, it is highly probable that this sort of solution will be based on already existing UI graphics as soon as it already represents the product and is the basis of brand awareness and brand image.

The concept of landing page  forming a strong feeling of branding via graphic design solutions

There are also cases when general branding elements such as logo, corporate colors, fonts, and the like are totally different from the stylistic concept of UI for the product. It is sometimes done purposefully in a case when marketing strategy for some reason presupposes that there shouldn’t be the visual connection of brand image with the product and an application or a website should not be strongly associated with the brand in general. However, in cases when this kind of difference is not part of the well-thought-out strategy but just a lapse in general design and marketing process, it can have a really negative influence on promotion and conversion rates.

Useful Reading

Here are some handy articles to continue plunging into the theme of web design and graphics for user experience.

5 Basic Types of Images in Web Design

Web Design: 16 Basic Types of Web Pages

How to Improve Web Scannability

How To Use the Power of Mascots in UI Design and Branding

Creative Stages of Logo Design

Mobile App Branding: Tips, Strategies, and Examples

6 Creative Stages of Design for Branding

Originally written for Tubik Blog

Сообщение Relations of Branding and UI Design появились сначала на Design4Users.

We have already shared our ideas about the role of icons in interfaces in the article describing their most important advantages. Today’s article deals with one of the aspects initiated by Quora question “In UIs, do people recognize icons faster than words?” Having shared our ideas in the answer, we decided to provide its extended version here for our readers.

The aspect of speed

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces, such as icons and their impact on the general efficiency of the product, has been an actual topic in the global design community for a long time.

In the scientific research about visual perception, after theoretic analysis and a set of practical experiments,  A. Santella made a conclusion: “The fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.” People, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of a high level of abstraction. That is an important fact designers widely use to improve the usability and navigability of their solutions.

If the only aspect a designer is interested in using icons is speed, then the idea in the original question will work positively. Yes, in the vast majority of cases, people fix and perceive pictorial elements like icons and illustrations faster than words. A great proportion of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in the design process:

• the human eye fixes images much faster than written text
• as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
• visuals are transmitted to the brain much faster, and important pieces of information are often fixed by the brain as visual images, even if they were obtained via text perception
• images are less vulnerable in combination with the background and surrounding elements, while text is highly dependent on the aspect of readability
• images have a tendency to stick better in long-term memory, which means that in interactions with the interface, people will not need to process and remember more data than it’s really necessary, so interactions get faster.

Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition, such as, for instance, the dyslexic or non-reading preschoolers.

GIF of the Tab Bar Interactions 

One of the popular elements of the layout where icons play highly practical value is a tab bar. Featuring interactive elements, it has limited space capacity; therefore, icons as the visual symbols of available interactions become an efficient design solution. The concept provided above shows that interface animation can liven up the visual elements and enhance microinteractions.

Weather Icons Presentation 

Here’s one more example showing how icons provide a user with the necessary information by visual means. Symbolic images of weather conditions are easy to understand, and at the same time they save a lot of space and give the opportunity to make the layout of the screen informative but not overloaded.

In user interfaces, where in many cases, basic interactions should take seconds, this aspect is highly important, and it is the essential reason to turn hell out of everything into graphic material. All the things mentioned above feature great advantages of visual elements of the layout, for example, icons, as a tool for fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.

The aspect of meaning

On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating a user interface layout. People can perceive icons super fast, but if the message they transfer is not clear and can have double-reading, this speed will not bring a positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition; it’s just fast noticing. Recognition means not only speed but also the right action or information, which this icon should bring to the user.

There are loads of widely-recognized icons, such as a telephone receiver for a phone call, an envelope for mail, a magnifier for search, and so on. Certainly, using these icons, you create a much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. If the icon doesn’t correspond with the goal and meaning it is assigned, the speed of recognition doesn’t matter. That’s why there are cases when text transfers the idea or data more clearly, and sometimes it is more effective to use a double scheme when the icon is supported by the text.

iPad App Interactions

Here is the concept showing mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides a higher level of recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay a big attention to the text. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

One more case when icons are often used together with copy is diverse side menus. Depending on the general stylistic concept of the interface, icons can imply a different level of complexity, from simple stroke icons to sophisticated and detailed ones.

Blog App

This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface, they support the titles of the categories for blog posts. Textual presentation of the category is visually supported with a good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case, icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time, enhances usability and navigation.

Anyway, the decision on applying icons, text, or both in the layout should be based on thoughtful analysis of the target audience and understanding the goals and conversions which have to be obtained via the interaction.

Reasons for applying icons in the interface

Summing up the points mentioned above, we can define several popular reasons for using icons in the interface:

– speeding up data perception
– enhancing memorability of the element via visual images
– improving navigation with visual markers
– saving up space on the screen or page when the long words or phrases are replaced with icons
– supporting copy material and providing its additional visual explanation
– supporting the general stylistic concept and its harmonic expression in a broad perspective.

User interface design solutions for PassFold project

Points to consider

Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but still, there are some general aspects that have to be thought out in the aspect of design with high visual perception:

• target audience (physical abilities, age, cultural background, general development, and education level)
• typical user’s reading skills
• typical environment of product use
• level of global or local product spread
• level of recognition for the chosen graphics
• level of distraction/concentration provided by the graphics

All the mentioned points deal with human cognitive abilities influencing the quality and efficiency of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout; it’s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger; they should support each other for the sake of a better user experience.

Restaurant Menu

Recommended materials

Diverse issues of visual perception have been an object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :
What Designers Should Know About Visual Perception and Memory – the article by VanseoDesign analyzing basic aspects of visual perception in design perspective;

Design Principles: Visual Perception And The Principles Of Gestalt – the article by SmashingMagazine considering the principles of Gestalt theory essential for design practice;

Studies Confirm the Power of Visuals in eLearning – the set of ideas in Shift’s eLearning Blog based on the analysis of visual perception in interaction;

37 Visual Content Marketing Statistics You Should Know in 2016 – the article by HubSpot about trends on visual content with some stats;

From Icons Perception to Mobile Interaction – the scientific article about icons perception in mobile interfaces;

Visual Perception – the list of books on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;

The Art of Seeing: Visual Perception in design and evaluation of non-photorealistic rendering – the theses of scientific research by Anthony Santella.

Useful Articles on UX Design

Here’s a set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design Search in User Interfaces

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Icons vs Copy. Visual Perception in UI появились сначала на Design4Users.

No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles, we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI/UX design issues enhancing usability and supporting the definitions with the links to the articles where we gave more details on the topic. So, let’s move on!

UX (User Experience)

It is the general attitude and emotional feedback that user has during different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, speed of work, etc. If all the logic and possible issues of product implementation in real life are analyzed and designed properly, it forms a positive user experience which means that users are able to satisfy their needs in a fast, easy, and pleasant way. Positive user experience is one of the strongest factors in retaining users.

UX Wireframing

It is the process of creating the general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of low or middle-level fidelity. The aim of this stage is to set a clear and orderly structure of all the layout, transitions, and interactions on the basis of the user’s problems and pains that the product is going to solve.

In one of our previous articles we provided a bit of metaphor on that. When we think about building a house, for example, we usually mean the process of the physical appearance of the construction rather than tons of projects, drawings, and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case, you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application, or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time, and vice versa, it will save the time you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

That is the aim of the UX part of the design process. UX wireframing stage should be heavily based on user research, competition research, and analysis of all the data obtained. In the outcome, it creates a clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as the placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing the design process and increasing performance.

Read more on this topic in our previous article

UI (User Interface)

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools for increasing usability and satisfying target users’ needs and wishes. All the features of visual perception as well sound and tactile feelings influencing the product use and interaction with it should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation, and so on and so forth are able to affect the performance of the final product greatly in both positive and negative ways.

In general terms, the UX research and wireframing stage are about how the website or application works while UI is about how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections, and user behavior while the UI stage provides a visual representation of all the concepts. It means that ideally, the designer should first work on the UX part with a concentration on layout, making it more powerful, thought-out, clear, and easy to use. Without this vital work, you highly risk creating a pure mess out of the user interface.

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when the newborn heart and brain of your product are clothed with its skin and bones. Here the product gets its real color scheme, forms, and features of the layout details, styles, animated elements, and so on.

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work in the other.

Here are some fresh UI design examples for different types of products from Tubik Studio portfolio on Dribbble:

Birds of Paradise Encyclopedia

Comics Shop Home Page 

Simple Blog App 

Read more on this topic in our previous article

Prototyping

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analog of the final product as they aren’t those. Their main aim is to enable a designer, a customer, and a user to check the correctness and appropriateness of the design solutions.

The value of prototypes in the sphere of app and web design has rocketed over the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be a great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

The prototypes in the UI stage are created more for the presentation of the application’s general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details in the final stage of UI in most cases is not as reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

Read more on this topic in our previous article

Icon

An app or desktop icon is an image that has a kind of symbolic and metaphoric potential and becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.

In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.
Read more on this topic in our previous article

Microinteraction

Microinteraction is one particular case of a user’s interaction with the product to complete one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone on a social network, rate a blog post, or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear, and fast as possible.

BuonApp

Read more on this topic in our previous article

The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. New definitions are coming soon!

Recommended Reading

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Visual Hierarchy: How to Organize UI Content

Gestalt Theory for UX Designers: Principle of Similarity

Gestalt Theory for UX Design: Principle of Proximity

Small Item, Big Impact: Types and Functions of UI Icons

Copy Content in User Interfaces

Originally written for Tubik Blog
Welcome to see the designs by Tubik Studio on Dribbble and Behance

Сообщение UI/UX Design Glossary. Key Terms появились сначала на Design4Users.

The original Quora question we are answering today was the following:

What’s the difference between human-centered design and user-centered design?

Two terms mentioned in the question are widely used replacing each other in different contexts and often perceived as equals. The difference between the meaning people put behind those words is really slight and blurred that it is easy not to notice it at all. However, with a content manager onboard holding a degree in linguistics and being a keen lover of the slightest semantic nuances, we decided to get deeper into the issue. As research and practice show, although these terms, in fact, have the same roots, the idea they present is viewed from a bit different perspective.

It can be supposed that human-centered design is the process of creating things deeply based on general natural characteristics and peculiarities of human psychology and perception. It doesn’t matter if you design furniture, cars, stationery, TVs, websites or anything else – any object of design can be made human-centered on the ground of psychology, physiology, sociology, and other sciences analyzing human life and interaction with the environment. It means that human-centered products will be not only nice but also functional according to psychological traits and features typical for big groups of users.

A really good and simple definition is found in the article “Characteristics of Human-Centered Design”: “…human-centered design can be defined as the process that places the human needs and limitations in a higher priority compared with other targets during the design thinking and production differential stages. During this process, the designer is required not only to analyze and come up with a solution for existing problems but test and validate the designed products or service to achieve planned targets in the real world.”

For example, there are basic conditions of general physical human abilities, color perception, contrast perception, readability, interaction with a product in different environments that are typical for the vast majority of people. Let’s say, typically people are not able to see in the darkness, and the darker is the environment, the harder it is for most people to perceive something visually, it doesn’t matter what age, education level, social layer, professional skills you represent. This is a common human physical characteristic. Neglecting it means creating a product which people will not be able to use properly, being limited in their abilities.

Creating objects with which people are going to interact with, designers have to be aware of those traits and take them into account in the process. That is the reason to study at least the basics of psychology, physical and emotional perception for designers who would like to create things convenient and friendly for people in general. We also believe that is a strong reason to involve psychologists, behaviorists, physiologists and other experts in the process of design.

Portrait vs Landscape

Here you can see the interactive concept of transition from portrait to landscape mode. It is based on the general ability and necessity of any user of digital products used on the iPad to get feedback from the system that the action of transition from one mode to the other is done. If it is done smoothly and with a quite natural speed, that is one more element of positive user experience, sometimes even unnoticed as the microinteraction takes split seconds. The presented example actually imitates interaction with a physical object and therefore makes the user experience more clear and positive for users of different age, gender, educational background, etc. This is actually a small piece of the human-centered design solution.

Continuing the theme, user-centered design is a more focused and concise version of human-centered design with a deeper analysis of the target audience. It is concentrated on not only human characteristics and perception in general but also specific traits and features of target users to make the problem-solving potential of the designed product as high as possible in the perspective of its users. This is the stage when details about the target user of design objects start playing their role: defining a target audience, the designer takes into account age, gender and social status, potential education level and professional background, influential social factors and typical environments of product usage, etc. On this basis, the designer makes deeper research on preferences and peculiarities, special aspects of interactions, specifying general human-centered ideas with important details of target audience’s preferenсes, emotional and physical perception traits as well as levels of technology awareness and tons of other factors. This is what we usually do on the stage of user research in Tubik Studio and practice shows this stage is vital for creating problem-solving and user-friendly designs.

So, it can be said that human-centered design is the first obligatory step to making the product applicable, while the user-centered solution is the next step to make it concentrated on the pains and needs of a specific category of users.

Let’s look at one more example.

Contact List Concept Scrolls

This design concept for a contact list looks nice and voguish. It presents two different variants of scrolling the directory and refreshes traditional interaction experience. It is grounded on basic aspects of readability, contrast, visual hierarchy, provides clear feedback to user’s actions and necessary functions. It follows the basics of color theory, logics, and visual harmony. Certainly, it is human-centered. No doubt, a big proportion of teenagers and millennials, people who use diverse interfaces every day and see them as an integral part of their life, will be engaged and would like to try it. However, for older people, this sort of interface can seem a bit scary and overloaded as well as somehow darkish comparing to simple traditional interfaces based on the light background. So, this user-centered interface responds to the wishes and preferences of the narrower target audience.

Here is one more case featuring web design concept by Ernest Asanov. It represents interface design for a website presenting online bakery selling. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Therefore, the website is designed aimed at a particular target audience. As we mentioned in one of our articles about the benefits of dark background in user interfaces, dark color solutions can form popular associations in visual perception. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige, and power. This is the style provided by the presented design: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action. The designer worked out the solutions that will look attractive and informative for target users wishing to feel the exclusivity and high-quality of the product and able to pay more than average. Therefore, this example also shows the techniques of not only human-centered but deeper user-centered design.

However, supporting previous answers given by other professionals along with this question on Quora, it also has to be mentioned that in modern design, especially in a digital field like creating applications and websites, human-centered design and user-centered design are most often inter-replaced and used basically as full synonyms. Perhaps that happens because in this sphere most products are created and updated for a certain category of users rather than “for all and everybody”. Moreover, users of all the digital products are people, therefore all the solutions should get based on the positions of human-centered design. Certainly, it doesn’t mean that universal interfaces cannot be found: they do exist and we apply some of them on daily basis, so they are a good example of general human-centered design that successfully applies knowledge about features typical for the great majority of users. However, they are closer to the exceptions which prove the rule.

So, in terms of web and app design, we can assume that description of design as “human-centered” or “user-centered” just shows different levels of detalization in the design process, different stages one of which considers human interaction features and the next gets deeper in details of certain categories of users, their needs, wishes, and problems. A great example of the synonymic perception of the terms is the video powered by IDEO, great experts in human-centered design.

Again, it’s important to emphasize that the definitions given represent our personal vision of the terms based on linguistic nuances of given terms and practical experience of processes in the design studio with all respect to other points of view.

Originally written for Tubik Blog

Сообщение Human-Centered vs User-Centered. Are the Terms Different? появились сначала на Design4Users.