Tag Archives: web design

Articles about UI, UX, graphic design for websites, user interfaces, animation, design strategies for web pages and interactions, design tools, tips and resources.

usability_interfaces_ux_design_tubik

Take It Easy: Tips for Effort-Saving User Interfaces.

«Simplicity is the ultimate sophistication,» said genius Leonardo da Vinci, and this eternal truth is as fair now as it was several centuries ago. Such an approach in design for web and mobile interfaces results in human-centred products which are pleasant and easy in use. Make no mistake, simple doesn’t mean empty, primitive or monofunctional. Instead, it means clear, intuitive and helpful. Really simple products not only solve user’s problems but also do it in an optimal way in the aspects of times and effort.

 

We aren’t often thinking in terms of love and respect when it comes to digital products. We can describe them in tons of other words featuring appearance (like beautiful, elegant, interesting etc.) or functionality (like intuitive, easy-to-use, confusing etc.) or content (like informative, consistent etc.) but you rarely can hear that someone names a website or app respectful. However, respect of user’s time and energy is one of the vital goals which designers should strive to achieve in the product they work on. This approach is the great factor of usability and desirability. Today we would like to share some advice and techniques which could become supportive in this aim. These tips aren’t reinventing the wheel but present a helpful checklist for design outcome. So, let’s check what designers can do to save time and effort for users.

visual hierarchy in UI design

 

1. Put the core data into header

 

Talking about websites, it is an extremely helpful idea for quick and easy navigation. The only problem is to decide on what core data is, especially for websites with a huge amount of various data, like big e-commerce websites, news platforms or multi-theme blogs. Header is a strategic part of a page as people see it before scrolling the page in the first seconds of introduction to the website. Being a sign of invitation, header should provide the key information about the digital product so that users could scan it in split seconds.

 

In our article telling about web headers design in detail, we provided the typical types of content which can be included into headers:

 

  • basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.
  • copy block setting the theme of the product or service presented
  • links to basic categories of website content
  • links to the most important social networks
  • basic contact information (telephone number, e-mail etc.)
  • switcher of the languages in case of multi-lingual interface
  • search field
  • subscription field
  • links to interaction with the product such as trial version, downloading from the AppStore etc.

 

It doesn’t mean that all the mentioned elements should be included in one web page header: in this case, the risk is high that the header section would be overloaded with information. The more objects attract user’s attention, the harder it is to concentrate on the vital ones. Here designers, preferably together with marketing specialists and stakeholders, need to decide on the strategically important options and pick them up from the list or add the others.

Why is header so essential? Eye-tracking investigations show that whichever scanning model a particular user follows, the scanning process will start in the top horizontal area of the webpage. Using it for showing the core information and branding is a strategy supporting both sides: readers scan the key data quickly while website gets the chance to retain them if it’s presented properly. That is the basic reason why header design is an essential issue for UI/UX designers as well as content and promotion specialists.

gourmet_website_interactions_tubik

 

2. Make branding highly visual

 

In terms of the discussed topic, brand 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 — visual, verbal, touchable etc. In web and mobile design, branding supposedly means a set of visual elements defining the brand style, which can be applied in 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 the 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. Moreover, if the brand is already well-established, it’s signs observed in the first seconds of seeing a website or app increase the level of trust.

Bakery website design case study tubik

 

3. Use numbers, not words

 

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting finding: based on eye-tracking studies while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes and distance — something potentially useful for them. So they are hooked with the numbers included into copy while words representing numerals can be misses in the bulk of text. Even more, whatever numbers represent, they are more compact than their textual variant, which enables to make the content more concise and time-saving for skimming the data.

 

4. Make the call-to-action (CTA) instantly noticeable

 

A call to action (CTA) is actually a word of phrase stimulating users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Typical types of such interactive elements in the layout are buttons, tabs, or links. In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

bookshop website animation

 

5. Care about general page scannability

 

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with the better understanding of user behavior and interactions. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. In the article about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern.

reading pattern

Gutenberg Diagram

 

reading pattern zig-zag

Z-Pattern

 

f_reading_pattern_eyetracking

F-Pattern

 

Knowing these models, designers and information architects can build navigation and important data in the points where they have the highest chances to be seen and get the user interested. The well-thought-out visual hierarchy will make the page easily skimmed saving users’ time and energy.

design for users copy in UI

 

6. Check the icons perception

 

Icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction. It’s hard to overestimate their role in UI navigation: they make it much quicker as most users perceive images faster than words. Usage of recognizable and clear icons has a great potential in boosting usability. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested and if needed supported with the appropriate copy content.

 

7. Strengthen the message with theme images and hero banners

 

No secret, in many cases an image is worth a thousand words. In web and mobile UI it often works that way: images become highly supportive and effective in setting the mood or transferring the message. In addition, images present the part of the content which is both informative and emotionally appealing. Original illustration, prominent hero banners, engaging photos can satisfy multiple goals: they catch users’ attention, transfer the message visually, support the general stylistic concept,

  • catch users’ attention
  • transfer the message visually
  • support the general stylistic concept
  • set the needed theme, mood or atmosphere
  • demonstrate the core benefits or items effectively.

dance academy landing page animation

 

8. Talk to users in their language

 

Copy content plays the crucial role for communication with the user. Not only its effective visual presentation is significant for high page performance: the style, structure, and vocabulary should also correspond to user’s expectation from a page. Usage of too formal or business-like style in an entertainment app for teenagers, or vice versa too informal style on the luxury website selling elite real estate — there can be hundreds of cases when copy doesn’t follow business goals as well as habits and needs of a target audience. That kind of content inconsistency can be confusing and move the users away from the website or app. User research will be effective for this issue to see what way users want to communicate while a professional copywriter will help to strengthen design with the power of words.

web_ui_design_tubik

 

9. Use the power of Gestalt principles

 

Gestalt is the term meaning «shape, form». It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. It helps understand the psychology of the app or website users better. When designers know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way.

gestalt-theory-grouping_principles
 

For example, applying the principles of similarity and proximity, designers can group the layout elements according to  human cognitive abilities, so that users could perceive them in the most natural and convenient way.

bright_vibe_calendar_app_ui_tubik

 

10. Optimize visual content

 

Whatever interesting, attractive and informative is the interface, there is the invisible factor which can erase all the benefits — the loading speed. If the visual content — images, animations, video — applied to an interface is too heavy or doesn’t perform well on different devices, the risks are high to lose users before they will understand the strong points of the product. In terms of high competition, with loads of websites and application, be sure: users aren’t going to wait, they will head for the more convenient and quick alternative even if it loses in a number of points. Optimization and persistent testing of visual content is the real sign of respect to the user boosting less time-consuming flow of interaction.

website design UI

 

Hopefully, this list will be helpful for those who are aimed at creating positive user experience. Don’t miss the updates — new practical tips and inspiration are coming very soon.

 

Useful articles

 

This set of articles can be useful to dive deeper into the points mentioned above

 

Best Practices for Website Header Design

The Role of Branding in UI Design

Visual Hierarchy: Effective UI Content Organization.

Gestalt Theory for Efficient UX: Principle of Similarity.

Gestalt Theory for UX Design: Principle of Proximity.

Copywriting in UI. Words that Make Design Go Round.

Small Elements, Big Impact: Types and Functions of UI Icons.

Tips on Applying Copy Content in User Interfaces.


 
Welcome to see designs by Tubik Studio on Dribbble and Behance

Gestalt_Principles_in_UI_Proximity

Gestalt Theory for UX Design: Principle of Proximity.

Human brain is an amazing data processor whose broad capacity still hasn’t been explored at full. For designers dealing with user experience of any kind, knowledge of cognitive abilities and mechanisms is highly helpful in creating a user-friendly product. Today we offer you to continue our talk around this theme.

 

One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. For a brief reminder, Gestalt theory is based on the following idea: when people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. We have already presented the definition of Gestalt theory, the principles of grouping in particular, as well as looked into the principle of similarity for user interfaces. This time let’s discuss the principle of proximity for UX design.

 

Principle of Proximity

 

This principle is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize the variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt how to organize the interface along natural ways the brain absorbs and classifies data. The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.
proximity-group-gestalt

Source

 

The important thing to bear in mind is that via research and experiments proximity proved itself more powerful than other distinctive features such as color or shape, for example. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.

 

proximity principle in design

 

In user interfaces, which are full of different content, the principle of proximity helps a designer to organize the layout to make it scannable and easily-perceived for users. It’s not a secret that users aren’t ready to spend much time learning how the complex interface works so intuitive screen which can be quickly scanned has much more chances to retain the users and give them the best features of the website or app.

 

In general, we could define two directions of applying proximity principle in user interfaces: for typography elements and copy content and for blocks of different content and controls. As well as in the previous article devoted to grouping principles, we will support them with examples by Tubik designers.

 

Typography and copy

 

One of the domains in which proximity plays the crucial role is the organization of copy content in user interfaces. Scannability of the copy blocks in the layout is vital because readers don’t usually stay on the pages which look like a long homogenous thread of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why copy should be arranged according to the laws of both quick perception and aesthetic looks. 

 

White space, also known as negative space, plays the great role in this process. It allows a designer to activate the power of nothing:  the space without any content not only adds the air to general layout but can be also used to organize its elements as groups and unities where it’s needed. 

 

typography in ui design

 

For copy content, it can be used in different ways. For example, with white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and visually pleasant for readers: this approach is often applied in blog articles and big copy blocks on websites. In this case, the principle of proximity signals that the copy lines which are closer to each other present the unified idea or piece of information and in this way makes all the text structured. 

 

tubik_studio_structure

 

Here’s the interface concept of architecture blog. The principle of proximity works in this UI on several levels. First, it unites the lines of one copy block to be decoded as one piece of information. Secondly, every copy block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in general layout. The call-to-action element — link «See more» — also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. So, we can see that in this case, the designer activated proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of copy are beautifully composed around the theme illustration and are scannable in split seconds.

 

This approach also works well for extended lists like menus and catalogs. Proximity applied thoughtfully becomes the effective tool to organize all the positions and group them effectively.

tubik studio web UI design

 

For example, let’s look at Slopes website. The links to the core interaction zones of the websites in the header are quickly perceived as one unified group as they are placed close enough to each other and far from other content. The same works for the extended menu hidden behind the hamburger button: the links are organized in groups which are visually defined due to their close placement. Negative space used according to the principle of proximity strengthens the general visual hierarchy of the page.

 

Blocks of content and controls

 

One more domain where proximity can have a positive impact on user experience is organization of diverse content blocks in the layout: except copy, these can be images, links, icons, controls, CTA elements, products cards and loads of other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception.

 

ui animation design tubik

 

For example, here’s the e-commerce app for a jewelry store. The right screen shows the product card: we can see that the general data about the item — color, width, weight, and material —  is given in several lines which are close to each other and therefore are naturally perceived as a unified piece of content. At the same time, the detailed description of the item presenting quite a considerable piece of writing is placed further and in that way separated a bit from the data file. So, these content blocks don’t merge and users can easily differ key data from the detailed description.

 

website design tubik studio

 

Here’s another example, grounded heavily on the principle of proximity — a layout of an online magazine. All the content and control blocks are arranged on the basis of the broken grid and without any frames separating them from each other. Proximity of the elements allows users quickly define core content zones: the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article and the block of social network links in the footer. Moreover, inside this global block the principle of proximity continues to separate or unify the elements: according to it, the designer arranges the positions in the list of latest publications around different topics as well as separates the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.

 

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: symmetry, continuation, closure and others. 

 

Recommended Reading

 

Gestalt Theory for Efficient UX: Principle of Similarity.

Cognitive psychology for UX: 7 Gestalt principles of visual perception

Design Principles: Visual Perception And The Principles Of Gestalt

Improve Your Designs With The Principles Of Similarity And Proximity

Gestalt Theory of Visual Perception

Gestalt Principles: How Are Your Designs Perceived?


Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to read online or download the free e-book «Problem-Solving Web Design»

gamification in UI UX tubik blog

Gamification in UX. Missions and Challenges.

A life is always full of challenges and that what makes us self-improve again and again. The same pattern works with digital products. When users have challenges to handle and missions to attain, they have reasons to come back to an app or website.

 

In our previous articles, we described the role of gamification (the technique of exerting game mechanics into the non-game environment) in UX. Also, we explored one of the game mechanics called user journey. Today’s article is devoted to a mission and a challenge as two effective gamification elements. Let’s see how they can be applied in a digital product and what solutions they can bring for the efficient UX.

 

Mission and challenge as game mechanics

 

Every game provides missions and challenges to the players so that their journey would be exciting and interesting. People go from one mission to another handling different challenges on their way. Accomplishing the levels players grow from beginners to professionals which helps them feel more confident in the world of this game. These game mechanics have the same effect on apps and websites.

 

Users need the motivation to return to a digital product every day. One of the most powerful motives which move people to do something is a desire to prove that we are able to handle any kind of challenges. So, why not to make a good use of it? Let’s see what mission and challenge are in terms of product UX.

 

upper app UI design case study

Upper App

 

Mission

 

A mission is basically a task which users need to complete. Missions serve as guidelines which help users adapt within a product. People learn how to use an app and improve their skills by accomplishing one mission after another. There are also repeatable missions which can return every day, week, month or any other interval. This kind of game mechanics keeps users motivated and engaged daily and makes them constantly go back to a product.

 

Challenge

 

Challenges can be compared to the stairways which lead users to the end of a mission. In other words, they are mini-tasks which people need to do to complete a major task. For example, users have a mission to gain a new level of user proficiency so that they could have an access to extra features of a product. To complete the task, users have to handle certain challenges such as visiting a website daily during a week.

 

A mission and a challenge are effective game elements motivating people to take an action which can be great tools on the way for UX improvement. To enhance their effect, it may be a good idea to use some kind of rewards, so that users could feel even more motivated.

 

Mission and challenge in digital products

 

To delve deeper into the topic, let’s see some practical examples of how and where missions and challenges can be applied as effective UX boosting tools.

 

home budget app case study

Home Budget app

 

First of all, we need to say that these game mechanics are widely used for educational applications. Learning itself is often a difficult process which requires persistence and motivation to get things done right. That’s why one of the main tasks of educational apps is to keep the learners interested and motivated all the time.

 

Various missions and challenges can work as powerful motivators for people. Game elements are able to make educational process more dynamic and exciting especially for young learners. What kind of a mission and challenges to choose depends on the type of educational material. For example, language learning apps can challenge the users in learning of a certain number of words per a day.

 

Another sphere of human life where people challenge themselves day by day is a sport. Fitness apps are useful helpers for both amateurs and professional sportsmen. They track our activities as well as show how a body reacts to physical exertion. So, why not to add the element of fun? Providing new missions and challenges, fitness apps help people self-improve their sports skills and reach greater heights.

 

fitness app UI design tubik

Fitness App

 

One more example of applying mission and challenges in digital products is alarm apps. To be more specific, let’s see a practical case of the app called Toonie. It’s is a simple alarm app for iOS which wakes people up whenever they need it. The thing that makes it stand out of the crowd is custom stickers which users receive as a reward for handling challenges such as waking up at the certain time. This way users turn into collectors and take one challenge after another to gather all the stickers available.

 

toonie alarm stickers ios tubik

Toonie Alarm app

 

These are only a few examples of how missions and challenges are applied in products. Designers can experiment with game mechanics and apply them to the most ordinary digital products. This way they may add the element of uniqueness.

 

When and why to apply mission and challenge

 

To define if missions and challenges suit your project, let’s see what solutions they may bring to UX.

  • Missions help to onboard users which only start their journey. They guide people assisting to adapt within a new interaction and navigation system.
  • When users accomplish tasks from applications, they achieve different life goals. For example, taking challenges such as doing squats every day, they move forward to their big life goal — getting fit.
  • Challenges are strong motivators which induce users to take the expected actions. They are the effective tools assisting to increase user engagement.
  • Game elements such as a mission and challenge add interactivity to digital products.
  • They can bring the element of fun to an ordinary product making it stand out of the crowd.
  • Missions and challenges make people return to an app or website more often because some tasks require constant actions within a product.

 

Animated stickers mood messenger design tubik

Animated stickers for Mood Messenger

 

Gamification may not work well for some products. Everything depends on the business goals which stand behind a product as well as the solutions which it brings to users. Before you start gamification process, you need to consider the peculiarities of a target audience and learn if the game elements respond to the users’ needs.

 

— Make sure if the potential users will have time and desire to take the challenges. In some cases, people just need to use a product quickly and leave it till the next.

— Missions and challenges should be optional to attain. Even if the target audience is inclined to challenges, there is still a part which would prefer to skip the tasks.

— Keep the level of gamification in balance. Depending on the type of a product choose the number of missions and challenges as well as their level of difficulty.

 

gamification in UI UX tubik blog

Night in Berlin App

 

Motivation is a powerful engine that makes people move forward. Challenges and missions are the game mechanics serving as motivators for users. The curiosity and excitement drive people to continue performing various the missions and handling and spend more time on an app or a website. Stay tuned!

 

Recommended reading

 

Gamification in UX. Increasing User Engagement.

Gamification Mechanics in UX: Smart User Journey.

Gamification

Challenge Accepted! The role of challenge for gameful design


Welcome to see the designs by Tubik Studio on Dribbble and Behance

UI navigation design elements

UX Design Glossary: Interface Navigation Elements. Set 2.

Interface navigation belongs to the core issues of UX design. That’s not surprising: it’s hard to get to your destination if you can’t see the way. Being surrounded by more and more websites and applications every day, users are high-fed with the diversity of offers and expect intuitive navigation as a must-have. So, let’s continue our talk about the theme with a new issue of navigation glossary to learn more about this powerful booster of usability. Earlier we presented you the first set of UX glossary for navigation covering the definitions and examples for navigation, menu, button, CTA, bar, picker, switch etc.  Today let’s add the new ones to the list: check the details for icons, search field and tags.

 

information architecture for designers tubik

 

Icons

 

An icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

 

One of the most valuable benefits of icons among is the ability to effectively replace the text. This feature is able to boost usability and strengthen navigation as most users tend to perceive and decode images faster than words. However, even the slightest misperception or double meaning can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience. One of the effective variants is using both copy and icon so that different categories of users could feel good with that: this approach is particularly popular in various catalogues of e-commerce websites where different positions are presented by both words and pictures giving the user double support for quick and clear navigation.

UI icons in interface design tubik blog

 

Based on their functions, icons can be classified as: 

— interactive icons: icons which are directly involved into interaction process. They are clickable or tappable and respond to the users request doing the action symbolized by them. They inform users about the functions or features of the buttons, controls and other elements of interaction. In many cases, they are obvious and don’t need the copy support.

— clarifying icons: icons aimed at explanation, visual markers explaining particular features or marking out categories of content. They may be not the layout elements of direct interaction; also, they are often found in combination with copy supporting their meaning. 

— entertaining and decorative icons: icons aimed at aesthetic appeal rather than functionality, often used to present seasonal features and special offers. They present the effective way of attracting user’s attention and enhance the general stylistic concept of a digital product.

— app icons: interactive brand signs that present the application on different platforms supporting the original identity of the digital product.

— favicons: represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.

 

tubik studio tapbar ui

 

Read more about types and functions of icons here

 

Search Field

 

A search field, which is also called search box or search bar, presents the interface element enabling user to type in the keywords and this way find the pieces of content that are needed. It is one of the core navigation elements for the websites or apps with a big amount of content, in particular blogs, e-commerce and news websites etc. Well-designed and easily found search field enables the user jump to the necessary point without browsing through the numerous pages and menus: as this approach respects user’s time and effort, it is highly demanded in user-friendly interfaces.

 

In terms of design, this element can be presented in different ways, from the framed tab to the interactive input line, or even minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation. Experiments with this icons can influence badly on interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. The flow of interaction can also be supported with the dropdown menu offering possible options or auto-filling functionality.

 

tubik studio ice ui website

Another important issue is the placement of the search graphic control in the interface. In web design, search field can be often found in a header of a website and this is a good choice: as we mentioned in the article devoted to design practices for website headers, for any website it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down. For example, it is actual for big e-commerce websites often visited by users who have a particular goal, a specific item they are looking for — if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource. Moreover, the power of habit should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.

 

Talking about search field in mobile interfaces, the situation differs as the designer is much more limited in the usable space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar and easily reached. In case the search is not crucial for the user goals and usability of the app, it can be hidden in menus or shown only on the screen where it’s potentially needed.

 

tubik studio motion design ui

 

Tag

 

Tag is an interactive element presented with a keyword or phrase that enables the user to move quickly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific categories of content so they support navigation with the additional way of content classification. Moreover, tags are often the elements which users create by themselves comparing to the names of categories that are fixed by the website and can’t be changed by users.

 

design for users website interface

 

Tags are widely used on the platforms based on user-generated content: when you upload the photo to the stock, post on the social networks or write on the blog, you can mark your content with the particular keywords which will then unite all the pieces of content marked with the tag. The screenshot above shows you the part of the home page of Design4Users Blog which actively uses a cloud of tags to enhance navigation around the blog content. In terms of interaction, click on a tag moves the user to the webpage collecting all the content marked with this tag. Also, tags are SEO-friendly technique increasing the chances that the content will be found via search engines.

example of tag in the interface

As another example, here’s the tagging offered by Unsplash, the well-known platform of free stock photos. When users download a photo, they are offered to type their own tags aka keywords which would describe this photo in the best way helping other users to find it. As we can see, the input field for adding tags also supports users with prompts for better usability. So, tags present user-generated elements of navigation that makes the interface closer and clearer to its target audience. 

 


 

Planning the navigation is the hard work which demands a good knowledge of psychology and interaction patterns, user testing and serious approach to information architecture from the earliest stages of an app or website design. However, it becomes the solid ground for positive user experience which will solve users’ problems and motivate them to get back to the product again and again.

 

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets — the next one will continue the issues of navigation with deeper insights into types of menus, buttons, and breadcrumbs. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact viadirect message on our Facebook page , via Twitter or our Quora representative. New definitions are coming soon!

 

Recommended reading

 

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more on the theme.

 

UI/UX Design Glossary. Navigation Elements.

iOS Human Interface Guidelines

Navigation patterns for ten common types of websites

Small Elements, Big Impact: Types and Functions of UI Icons.

3 essential rules for effective navigation design

Perfecting navigation for the mobile web

Understanding Web UI Elements & Principles

User Interface Elements

The Most Creative Mobile Navigation Patterns

Basic Patterns for Mobile Navigation


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read us on Quora

tubik_quotes_design_for_emotion

Design for Emotion: Expert Tips by Aarron Walter.

The highest priority, which the designers set creating a website or mobile application, is functionality and usability of the interface — and for sure, that’s a right direction. However, it shouldn’t be forgotten that one of the crucial conditions of positive user experience is desirability. People aren’t only made of logic and action, they are also full of feelings, intuition, emotions, and memories. That’s what designers have to keep in mind aiming at user-friendly products.

 

Earlier we have already shared numerous expert quotes, tips, video talks and books worth reading to support our readers with useful resources. In particular, you could check the insights into Design Is a Job by Mike Monteiro — the book belongs to the series A Book Apart supporting designers with the diversity of expert tips, case studies, and resources. Today continuing this way, we would like to share a new set of quotes from the book highly recommended for UI/UX designers: Designing for Emotion by Aarron Walter, former Director of User Experience in MailChimp and now the VP of Design Education at InVision. The book offers the reasons why users’ emotional respond means much for setting positive user experience strengthening this idea with references to scientific research works and practical case studies of design for recognized websites. So, here we will save a bunch of 35 useful expert tips from the book for Tubik Quotes Collection — join in and let’s look into the design for emotion together. 

tubik_quotes_design_for_emotion
 

For a user’s needs to be met, an interface must be functional. If the user can’t complete a task, they certainly won’t spend much time with an application.

 

Many websites and applications are creating an even better experience. They’re redrawing the hierarchy of needs to include a new top tier with pleasure, fun, joy, and delight. What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed!That would be an experience you’d recommend to a friend; that would be an idea worth spreading.

 

We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?

 

design_quotes_tubik 02

 

Emotional experiences make a profound imprint on our longterm memory. We generate emotion and record memories in the limbic system, a collection of glands and structures in the brain’s foldy gray matter.

 

When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.

 

Certainly, emotional design has risks. If emotional engagement compromises the functionality, reliability, or usability of an interface, the positive experience you wanted will mutate into a rant-inducing disaster for your users. A friendly wager with an upset customer isn’t always going to turn the tide.

design_quotes_tubik 03

 

Our definition of beauty originates in our own image. The human mind is exceptionally skilled at scanning objects and information to discover meaning in abstract forms. We can find traces of ourselves in most anything we see, and we like that. Our ability to find signal and discern patterns in so much noise is a very important trait we use to navigate life, and as you might expect, this ability to recognize patterns greatly affects the way we design.

 

As you increase the number of high contrast elements on a page, you proportionally increase the time needed to perform a task, learn a system, and remember pathways. Adding stuff pushes the human brain to its limits. Have you ever been to a party where everyone is yelling to speak to the person next to them? As the volume increases, everyone must speak louder to be heard, but that makes it even harder to have a conversation. Design works in the same way. If everything yells for your viewer’s attention, nothing is heard.

design_quotes_tubik 04

 

 

Design is too often wrongly taken for the indulgent frosting on a functional interface. Have you ever overheard a colleague declare, “It would be nice if we could have a sexy interface, but people care more about what the site does than how it looks”? Would this person show up to a job interview in their pajamas because people only care about what they can do and not how they look? If they did, I’d bet they’d discover that thinking is flawed.

 

Through our personalities, we express the entire gamut of human emotion. Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design.

 

With personality as the foundation of your designs, you can layer more emotional engagement on top.

design_quotes_tubik 07

 

 

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface. To achieve this goal, we must consider how we interact with one another in real life.

 

In modern web design, we research, plan, and create with our audience’s attitudes and motivations in mind. User experience designers interview their audience, then create personas—a dossier on an archetypal user who represents a larger group. Think of personas as the artifacts of user research. They help a web design team remain aware of their target audience and stay focused on their needs.

 

Following a structure similar to a user persona, you can flesh out your design’s personality by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions. A design persona describes how to channel personality in each of these areas and helps the web team to construct a unified and consistent result.

 

We know that people using websites and applications navigate and process content quickly and that their attention is limited. Introducing surprise into an interface can break a behavior pattern and force the brain to reassess the situation.

design_quotes_tubik 08

 

Aside from being the right thing to do, surprising people with kindness and individual attention can help a business achieve success.

 

Anticipation is what game designers call an open system. Games designed with an open structure, like The Sims, allow users to wander and shape game play on their own terms. Open systems encourage people to use their imagination to create a personalized experience.

 

Giving users the power to choose changes the tone of their response. When forced to change, people often react negatively. Allow people to change on their own schedule, and you empower them, diffusing animosity. We’d all rather hear “You may …” instead of “You must ….”

 

Surprise, delight, anticipation, elevating perceived status, and limiting access to elicit a feeling of exclusivity can all be effective in getting your audience to fall in love with your brand. But your tactics must be appropriate for your audience and brand experience.

design_quotes_tubik 09

 

As designers, we’re in a unique position to help users follow their gut instincts. Using common design tools like layout, color, line, typography, and contrast, we can help people more easily consume information and make a decision driven by instinct more than reason. Just as you chose the shirt you’re wearing because it felt right, we can help our audience sign up for a service or complete a task because their gut tells them it’s the right thing to do.

 

The way type, color, and layout fit together says a lot about a brand and shapes new users’ perceptions.

design_quotes_tubik 10

 

Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website.

 

Skepticism is not the only obstacle we confront when trying to entice our audience to act. Laziness is just as big a hurdle. In truth, people really aren’t as lazy as we like to think they are. They’re just looking for the path of least resistance to their destination. When people are reluctant to act, sometimes a little incentive gets them moving.

 

Great design that uses cognitive and visual contrast not only makes you stand out, it can also influence the way people use your interface.

design_quotes_tubik 05

 

Users react apathetically to websites when the content is irrelevant to their interests, or when content is poorly presented. Content strategy will help you create the right content for your audience.

 

Great content delivered in an emotionally engaging manner is like kryptonite for apathy.

design_quotes_tubik 11

 

Emotional design is not just about creating positive experiences and overcoming obstacles. It can also help us deal with difficult situations like server downtime, lost data, or bugs that affect a user’s workflow. Mistakes happen. Things go wrong. But a well-crafted response, and the cache of trust you accrue with your audience through prolonged emotional engagement, can save you in times of trouble.

 

In fact, when you create a compelling experience, your audience will often forget about the inconveniences they’ve encountered over time and just remember the good things about your brand. So long as the good outweighs the bad, you win.

 

When people are deeply stressed by an outage or a mistake you’ve made, you must explain what happened swiftly, honestly, and clearly. Give people the facts of the event, communicate that you’re doing your best to resolve things, then update users regularly, even if not much has changed.

design_quotes_tubik 06

 

Updates let people know you’re still focusing all of your attention on resolving the problem. They give you another opportunity to apologize for the inconvenience and reassure your users that you’ll fix the problem as quickly as possible.

 

In high-stress situations, your top priority must be to tame negative emotions as best you can and, if possible, shift them back to the positive.

 

Emotional design is your insurance to maintain audience trust when things aren’t going your way. If you’ve ever been emotionally committed to someone who has hurt you, you know that the human response to such situations is driven by gut feeling more than by logic. You don’t add up the good and bad experiences in your mind and do a detailed comparison before deciding whether or not to maintain ties with the person. You simply respond based on the strength of your emotional commitment. We react similarly to products and services.

design_quotes_tubik 12

 

Emotional engagement can help us look past even the most serious infractions, leaving the good more prominent in our mind than the bad. Psychologists call this phenomenon of positive recollection the rosy effect. As time passes, memories of inconveniences and transgressions fade, leaving only positive memories to shape our perceptions. This is good news for designers, as it means that the inevitable imperfections in our work don’t necessarily lead to mass user exodus.

 

Emotional design does more than entice and keep your audience, it helps ensure you’re talking to the right people. Not every customer is right for your business. Some will be so high maintenance that they will cost you more than they contribute. That can be a real morale and financial drag.

 

We’re not just designing pages. We’re designing human experiences. Like the visionaries of the Arts and Crafts movement, we know that preserving the human touch and showing ourselves in our work isn’t optional: it’s essential.

design_quotes_tubik 01

As a bonus, we also add the video talk by Aarron Walter continuing the ideas from the book — it was included in the set of must-see expert speeches for UI/UX designers.

 


 

Welcome to check the quotes by Mike Monteiro from «Design Is a Job» for A Book Apart

Welcome to check issues of Tubik Quotes Collection on brandingusabilityuser-centered design and content strategy

Welcome to read or download Tubik Magazine free books on logo design, design for business and problem-solving web design

mood boards in UI design tubik article

Design Mood. 7 Motives to Create Mood Boards.

Just imagine you worked hard, spent plenty of time creating a detailed prototype, and then a client rejected it saying that it isn’t even close to what he wanted. Sounds familiar, doesn’t it? Every designer at least once has been through such an unpleasant situation. Probably right now everyone expects some relevant advice how to avoid this kind of situations but truly saying there is no a perfect decision.

 

However, there are several methods helping to reduce risks of clients’ rejects as well as save designers’ time and nerves. Today’s article is devoted to the technique called moodboarding. Let’s see what mood boards are and how they can help in the designer’s workflow.

 

What’s a mood board?

 

The technique of moodboarding is popular not only in design field but among many creative professionals. Mood boards are literally boards (digital or material) which people fill with different kinds of things from photos to various textures so that they could visualize ideas and concepts.

 

Unlike wireframes and prototypes, mood boards don’t show the detailed picture of a future project. They are meant to transfer the right mood and bring the emotions expected from a product.

 

Mood boards are a useful tool helping designers effectively collaborate with clients and team members. Boards can be easily created within a tight time frame and turn an abstract idea into a real one. This way designers can effectively share their ideas with the others because visual material always works better than fluent phrases.

 

mood board UI design

Mood board compiled by Tubik designer Ernest Asanov

 

How to create mood board?

 

Mood boards are a good way to experiment with a color palette, fonts, and style as well as plan visual hierarchy of a project. Everyone decides for themselves what components to include in a mood board. UI/UX designers usually use the various samples so that they could characterize interface elements. There are several common types of mood boards. Let’s see what they are.

 

Free collage

 

Designers often collect free high-resolution photos so that they could use the material in the future projects or elsewhere. These collections may come in handy for the mood board creation. A free collage consisting of beautiful photos is an effective way to transfer a mood of the design concept. Also, collages can be filled with illustrations, fonts, and color examples.

 

This type of mood boards is the fastest and the easiest among the others. However, if a client is detail-oriented, they may not be excited with a free collage as an example of a future project.

 

mood board graphic UI design

Mood board compiled by Tubik designer Ludmila Shevchenko

 

Reference collection

 

Another source of inspiration and a method for idea visualization is quality references. There are plenty resources such as Behance and Dribbble where designers can find inspiring concepts and real projects with a free access. Collection of design works united by a common style or any other feature can easily illustrate an idea for a new project. Moreover, such mood boards help clients effectively comprehend a concept because they can see similar references and imagine what their product will look like.

 

Template board

 

These mood boards are more like prototypes and wireframes. Their aim is to show the structure and visual hierarchy of a product. The difference is that UI elements on a template board are not detailed as in prototypes or schematic as in wireframes. Components are shown via random illustrations and photos presenting a layout of a digital product. In addition, images can be selected that way so it would be easy to recognize corresponding color palette. This method is faster than prototyping because it doesn’t require details.

 

ui moodboard design

 

Mood board compiled by Tubik designer Ludmila Shevchenko

 

Why should UI/UX designers create mood boards?

 

Many of us may notice that wireframing and prototyping are always described as essential stages in design workflow while moodboards are rarely mentioned. Some may consider them as the waste of time or just entertainment. Nevertheless, there are many people who include moodboarding as a part of every creative process. But why do they choose the technique? Here we’ve gathered the list of reasons for designers.

 

1. To save time and effort.

 

The first and a big advantage of moodboarding is that it doesn’t require much time to be done. It means that in a few hours, or maybe less, designers can create a visual guide for clients presenting a concept. A mood board can be easily edited so it saves both time and effort.

 

Such a guideline is a good foundation which allows quickly jumping to the next stage of prototyping. Moreover, designers save their nerves if a client is not satisfied with the outcome and demands a new concept because they don’t spend a whole day to create a detailed presentation.

 

2. To get inspired.

 

Of course, designers can’t always rely on inspiration because they have work to do, still, things are done more effectively if the creator is inspired. Moodboarding is a good way to find ideas and enthusiasm. Beautiful photos and illustrations help to find the right mood and style. In addition, if you can, try to create a material mood board via things surrounding you. It is said that handwork has a powerful impact on creative thinking. So, why don’t take a try?

 

3. To find a right color palette.

 

A collage can include photos, illustrations and color samples forming a compelling composition. By mixing images in different colors on a board designers can experiment with a color palette even if UI elements are not ready yet.

 

4. To enhance communication with customers.

 

When a product is at the stage of an abstract idea, it is sometimes difficult for a designer and a customer to understand each other while discussions. For example, both sides can see the certain style a bit differently so it can cause an argument. That’s why it is always a good idea to have some visual references such as a mood board.

 

5. To talk less and show more.

 

Continuing the point above, it should be said that any long report can’t explain your plans and ideas better than a visual presentation. Words can fail in shaping a picture in a client’s head but the visual material is a reliable guide helping customers to dive deeper into details and understand your ideas correctly.

 

Illustrate your ideas at the early stages so that clients could see what you plan and how their product is shaped up.

 

6. To find a style for a design.

 

If a creative team hasn’t received directives from clients about the style of the design, the task lays on a designer’s shoulders. To see how one or another style works, there is no need to build a detailed prototype for each of them. Add to a mood board different textures, experiment with types of illustration, test fonts, and change colors. It’s faster and more convenient to try options with a mood board than spend time changing prototypes one by one.

 

7. To involve clients in a process.

 

One of the ways of gaining clients’ trust is to let them feel they are deeply involved in a project. So, at this stage, if they wish, they can actively participate in the selection of styles and samples. Moodboarding is an easy technique which can be accomplished if you’re a non-designer.

 

Clients can be suggested to make a collage of photos and pictures, or maybe even references if they are not new at this. This way designers can easily learn clients’ tastes and preferences and see what they expect from the project.

 

Examples of mood boards for digital design projects

 

For more practical presentation of the issue, we would like to show you the set of extended mood board, compiled by Tubik designer Dima Panchenko for his projects on user interface design. He also practices adding the general notes presenting the mood board to the client which has a positive effect on the process of communication and choosing the concept for the project.

 

1. The mood board for setting the client’s preferences about the general stylistic concept of the screen.

 

moodboard for UI project

 

2. The mood board presenting the vision of the style corresponding to the project requirements.

 

moodboard for UI design project

 

3. The moodboard with a variety of concepts for a sport app with football theme.

 

moodboard sport app UI design

 

Moodboarding can become a useful habit for every creative person. Designers can create mood boards to find the inspiration or use them as an additional tool in their workflow. Stay tuned!

 

Recommended reading

 

24 pro tips for creating inspirational mood boards

Creating Better Moodboards for UX Projects

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance

usability testing for web and mobile

Tests Go First. Usability Testing in Design.

A tech guru, Steve Jobs, once said: “Design is not just what it looks like and feels like. Design is how it works.” Unfortunately, some people still think that designers’ job ends with aesthetic aspects of a product. Nevertheless, UX design depends on several key factors including usability, utility, desirability, attractiveness. Each facet plays its role for a sufficient product, so a creative team needs to make sure all them are done right by conducting tests. Today’s article is devoted to the peculiarities of usability testing and various methods helping to discern usability problems.

 

Why does usability matter?

 

Before we go to the essence of usability testing, let’s find out what usability means and why it is called a core part of effective UX. Nielsen Norman Group defines usability as a quality attribute that assesses how easy user interfaces are to use. The level of usability depends on five aspects: learnability, satisfaction, efficiency, memorability, and errors. Learnability stands for how easy users can attain tasks during the first usage and satisfaction is how pleasant the usage process is. Efficiency is determined by users’ ability to accomplish a task quickly while memorability depends on time which people need to re-establish their proficiency after a period of not using a product. And finally, designers track the number of errors users make and how easily they can learn from these mistakes.

 

When all these factors are considered, digital products provide a high level of usability which means people can easily and effectively use them. But why expert designers are so concerned about a single aspect of UX? Isn’t it more important what services and solutions apps and websites provide? Obviously, the features make a product valuable for people. However, if users can’t figure out how to use an application, it brings zero profit to them. Even the most beautiful interface can’t guarantee a success without a clean functionality system. That’s why one of the core stages of UX building is usability testing.

 

information architecture for designers tubik

 

What’s usability testing?

 

Usability testing is a technique helping to evaluate a product by testing it on potential users. This way designers are able to see if a website or an app is usable enough as well as distinguish possible problems in UX. Usability testing is usually conducted at the UX building stage before a project goes to the development team. It allows changing inefficient solutions easier rather than in a complete product.

 

Moreover, usability testing is a good way to dive deeper into users needs and preferences by watching their reactions while they use a product. Designers can collect the essential information needed for the creation of the effective user-centered design. Also, the gathered information can be used not only for UX design but at the other stages of product development.

 

Types of usability testing methods

 

To reach the high effectiveness of usability testing and gain the expected profit, designers apply various methods which can be categorized into three main groups: explorative, assessment, and comparative.

 

Explorative methods are used at the earliest stages of UX. Designers present wireframes of a product to users and watch their reactions. Explorative methods aim at discovering how people comprehend a concept of a product and how their mental processes work while they use a certain product.

 

Assessment methods are used at the later stages when a user can test a usability of goods via prototypes. Such methods help to evaluate the effectiveness of an app or a website as well as determine the level of users’ satisfaction with a product. Real-time experiments assist to track users’ reactions and errors they make. The collected information is used for eliminating usability problems which have been determined during tests.

 

Finally, comparative usability testing methods are involved when designers need to choose between several solutions. Users compare two or more variants of UX elements then share the opinion with a creative team. Experts consider all the pros and cons of each variant and select the most user-friendly one.

 

There is a great number of usability testing methods. All of them vary and can be used under different circumstances. The choice often depends on goals which a team sets and the budget of a project. We’ve distinguished some common methods helping to test usability. Let’s see what they are.

 

home budget app case study

Home Budget App

 

Hallway Testing

 

This method foresees testing a website or an app on random people, meaning designers can ask someone passing in a hallway or elsewhere. Hallway testing may seem a bit difficult because it requires finding people who would love to take part in such an experiment and then would be able to give a constitutive feedback. The method is often used when the biggest part of work is done so that users could feel it like a complete product. Hallway Testing is one of the most common methods since it’s cheaper and faster than many others.

 

Remote Usability Testing

 

The name of the method speaks for itself. Such approach allows involving people from different countries so that a creative team could see how their product is perceived in various cultures. There are two types of remote usability testing: synchronous or asynchronous.

 

Synchronous remote testing is handled via video conferencing as well as various sharing tools such as WebEx or GoToMeeting. The synchronic approach allows designers to watch how different people use a product in a real-time. Also, users can receive some support from a creator if needed. Still, synchronous remote testing has its drawbacks. Users should be asked to gather in a certain time and if they live in different time zone it may be problematic. That’s why a day and time should be arranged upfront and it may take some time to find the best option for everyone.

 

Asynchronous remote testing is a bit easier to handle. Designers usually set particular tasks which users need to accomplish and then all the information including clicks streams and users’ errors that occur while interacting with a product are gathered automatically. Also, designers may ask users to give a small feedback about their experience. This way a creative team can track how people from different cultures react to the product using it in their own environment (e.g. at home).

 

usability testing

 

Expert Reviews

 

This common method involves evaluation from the experts with experience in usability testing. The approach gives the opportunity to receive wide and constituent feedback and spend less time for it. Experts usually apply testing tools but also they can test it like users. Also, there is another approach called automated expert reviews. It is conducted programs which define usability problems by the use of common patterns. Automated expert reviews are one of the fastest methods still it cannot test all the peculiarities connected with human factors.

 

Paper Prototype Testing

 

One of the essential stages of product creation is wireframing. It is a simplified and schematic visual representation of a layout for website pages or screens of an application interface.They are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

 

The wireframes can be presented to users where they can perform certain tasks like in a real product by interacting with paper models. The method may seem unsophisticated still it’s a cheap and fast way to find out usability problems at the early stages.

 

Thinking Aloud

 

Thinking aloud is a usability testing method which aims at collecting feedback from users right in the usage process. Designers ask users to verbalize their thoughts and feelings which they have while using an app or website. A creative team can comprehend the attitude patterns of the potential users and apply the gathered info for future UX improvements.

 

design for users copy in UI

Design4Users Website

 

Is usability testing profitable?

 

We’ve described only several methods of usability testing but there are much more of them. Methods can be changed or combined depending on the goals. If you still doubt whether you need to conduct usability testing, let’s look at the list of tasks which it helps to accomplish and benefits it brings.

  • Collecting the info helping to improve UX;
  • Identifying problems and bugs which a creative team can’t notice;
  • Ensuring user satisfaction with a product;
  • Increased efficiency of products;
  • Reduced cost of development process;
  • Fast problem elimination;
  • A product with a high level of usability will definitely stand out of crowd.

They say better twice measured than once wrong. Just remember that it’s easier to fix problems at the early stages rather than rebuild a complete product.

human memory tips on ux design

 

Recommended reading

 

Usability Testing

 

Precious Errors: Testing iOS Mobile Applications.

 

Usability 101: Introduction to Usability 

 

The Brief Guide to Testing Mobile Interfaces


Welcome to see the designs by Tubik Studio on Dribbble and Behance

gamification in UX design

Gamification Mechanics in UX: Smart User Journey.

From the very childhood people start playing games and they never really stop. Game spirit follows us in every sphere of our life revealing its facets such as challenges, achievements, or rewards from time to time. Trying to transfer game features into everyday life is a habit helping people to deal with complicated situations. Such a tendency could possibly cause the appearance of the gamification concept.

 

The word “gamification” stands for the technique of exerting game mechanics into the non-game environment. Designers often use gamification to create effective digital products and secure high level of user engagement. In one of our previous articles, we’ve mentioned common game mechanics such as challenges, points, badges, leaderboards, and journey. Each gamification element serves for certain goals and has a different influence on users. Today’s article is devoted to one of the most commonly used game mechanics called user journey. We’ll define its essence and find out how it works for UX improvements.

 

badges illustration tubik studio

PukaPal Badges

 

What’s user journey?

 

To make pleasing UX design, it’s vital to think out all the stages of user interactions. The thing is that one person may use a product for accomplishing different goals each day, even more, they apprehend the product differently every time. Designers and researchers noticed that experience and user interactions gradually evolve as people gain more skills in using the product. Such characteristics make it similar to a journey which players go through in games.

 

Considering this fact, designers come up with the idea of applying a game mechanic called user (player) journey in digital products. User journey can be defined as user’s progression stages over the time of product usage. Designers create UX that way so that people could go step-by-step through the various features and interactions which gradually change depending on users needs.

 

mobile app design tubik studio

Moneywise App

 

Let’s look at the example. A standard video game always has different levels from the easiest to the most complicated one. This way a player can adapt and easily comprehend how the game works on the easy levels and then constantly learn and make a progress. By the end of the game, a player is usually a skilled competitor who can deal with more complex tasks. If people receive difficult tasks at the beginning, they aren’t able to handle them. Or in case a game only consists of easy challenges, players will soon be bored.

 

The same works with digital goods. A product which has a simple system of interactions often attracts users with its convenience. However, if people use it for a long time and there are no changes at all, they may get bored. In case a product has an enormous amount of features at the start, they may just get lost within it. To avoid such problems, designers need to think of UX as a user journey, guiding them step-by-step to the point of achievement.

 

Stages of a user journey

 

User journey is a game mechanic which aims at making the process of interaction with a product easier and more understandable. A user feels as a real player starting the personal journey of the product usage. Designers plan different stages which a player (user) will gradually go through. Let’s look at the common steps which a user journey includes.

 

Onboarding stage

 

People who only start their journey within a product need to be actually onboarded. It means that users should be offered an introduction to the features so that they wouldn’t be afraid to make a mistake. Also, it is good to present a navigation system if it has some peculiarities.

 

Designers use onboarding tutorials in various digital products. Tutorials appear to users who launch an app or a web product for the first time helping them get oriented within unfamiliar features and controls. One more task designers need to accomplish at the stage of onboarding is user motivation. The product should be presented that way so that people had a motivation to use it more than once. That’s why onboarding tutorials need to contain short but clear info describing the possibilities of a product helping users to understand if a product can be useful for them.

 

tubik_toonie_help_screens_interaction

Toonie Alarm

 

Scaffolding stage

 

When users continue their journey, they go to the next stage of interactions called scaffolding. The step includes disclosing features progressively as the users become more experienced in using the product. Unlike the onboarding stage, users don’t get long instruction. Scaffolding is more like practical part. Users are trained to use a product proficiently, and the more they learn, the more tools (features) they receive. This stage allows users gradually learn more about a product and receive more features as far as they need to use them. Users don’t get a great number of features at once, so the interactions system won’t seem too overloaded or complicated.

 

toonie alarm UI design

Toonie Alarm

 

Progress stage

 

No matter what tasks people do, they always want to know about their progress. Providing the feedback on the results of a user journey, we can inspire them to continue. It’s a core step since people lose the enthusiasm of a beginner pretty soon and they need to be motivated to stay.

 

Some may ask what progress can be in non-game digital products? For example, a social app can notify users when they gained a certain number of new followers or friends. Meanwhile, educational applications can inform users on how much they’ve learned from time to time. All small details matter. Just tell people they achieved something and they get a dose of enthusiasm to continue.

 

blog app design tubik studio

Blog App

 

Endgame stage

 

Designers usually stop at the stage of scaffolding and progress uniting them in the endless loop, where users constantly learn and receive feedback. However, sooner or later people get bored of such patterns and may quit the product. Here is why the endpoint of a journey is also important to be thought out.

 

Endgame stage doesn’t mean that users will receive the message “Thank you for being with us! Bye-bye.” At this stage, proficient users are recognized as experts or veterans and they are usually given some privileges for loyalty. People like to be valued and they often give it right back. It’s not a secret that loyal customers are the best marketing managers for a product. New users willingly follow satisfied users’ testimonials.

 

Why a user journey?

 

User journey is a complex game mechanic which requires deep attention to details. Each stage should be carefully planned and connected to the others. Moreover, it requires long-term plans for future updates, so the process of user journey development may take a long time. Of course, some may ask if it is worth the effort to bring it into a product. Let’s see what user journey can give you back.

 

Clear interaction system. Users receive features gradually at the stage of scaffolding and users learn to utilize a product step-by-step. An approach helps to avoid problems with incomprehensible interactions and functions.

 

Increased user engagement. One of gamification principles is to make users always motivated and involved in “game”. User journey is usually full of different tasks and achievements which people can gain, so users can’t resist game spirit.

 

Customer loyalty. If a product is constantly improved for its users, people really appreciate it. Moreover, if a product has some privileges for loyal customers, people trust it more.

 

Product recognizability. As we said above, satisfied customers are effective marketers for a product. Users willingly share their pleasant experience and it won’t stay unnoticed.

 

The element of fun. As any other game element, user journey is a good way to bring an emotional aspect to a product. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual product, you help people reduce some stress and relax for a moment.

 

Animated stickers mood messenger design tubik

Animated stickers for Mood Messenger

 

All in all, we can say that user journey is an effective method for UX improvement. However, a designer and a client should consider the fact that gamification works well not for every product. It depends on a type of an interface, its target audience, and business goals. For more detailed information, check our previous article where we’ve defined the tasks which gamification helps to accomplish and don’t miss the updates on gamification in UI coming soon.

Recommended reading

 

Gamification by Interaction Design Foundation

42 Rules for Engaging Members Through Gamification: Unlock the Secrets of Motivation, Community, and Fun

Gamification in UX. Increasing User Engagement.

Gamification: Designing for Motivation


Welcome to see the designs by Tubik Studio on Dribbble and Behance

gourmet_herbs_website_design_tubik

Sell Like Hotcakes: UI Designs for E-Commerce.

In many cases when we are buying something, it’s not just about getting new things. It’s often about feeling and memories, dreams and achievements, changing ourselves inside and outside, sharing and giving, improving and learning… The advent of new technologies opened new perspectives for both shoppers and sellers, and the process of upgrading this type of relations is in active progress. A decade or two ago, buying something on the Internet was not included in a typical daily routine while now getting things and services in a couple of clicks cannot surprise anyone.

 

This state of things sets new challenges for the sellers, with efficient and appealing digital products for e-commerce ahead. “If you do build a great experience, customers tell each other about that. Word of mouth is very powerful,” said Jeff Bezos, the founder of Amazon, the biggest global online retailer. Today’s generation of shoppers is different in its vast majority: they are ready to buy almost everything online, they want to see the simple way to do it, they demand secure payment and fast delivery — and good design to present that all. That’s why websites and applications for e-commerce are so various: they have to attract their customers without getting lost in the ocean of the online competition. Well-designed user experience, based on research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in e-commerce sphere, the connection between design and profits is tighter than anywhere else.

 

Today we would like to offer you the set of interface concepts created by Tubik designers with the issue of e-commerce in mind. Here you’ll find the websites, mobile applications and landing pages aimed at selling products and services.

 

Website for a florist shop

 

web design florist store ecommerce

 

Flowers present the popular way to express various feelings and celebrate special occasions. Here’s the design concept for the online florist store: the general stylistic concept is light, minimalist and airy while prominent theme photos set the mood and inform users about the nature of the e-commerce offer. The home page sets the theme, establishes branding with the logo and slogan and shares some information about the service. The header gives the instant access to the extended menu of items hidden behind the hamburger button as well as provides the links to search, wishlist and shopping cart presented with minimalistic stroke icons. The footer includes the links to important service pages and accounts in social networks.

 

florist shop website design

 

Another page shows the catalog of items organized in cards: each presents the high-quality photo which is vital for this kind of business, price, and ability to add it to the cart or save to the wishlist right from the catalog page. There’s also the cloud of tags marking popular categories for better navigation.

 

florist shop website design

 

If the user wants to learn more about the particular offer, it can go to its product page, like the one shown above, and check the details.

 

Application for the e-commerce jewelry store

 

jewellery ecommerce app UI

 

Here’s a set of interactions for the app design concept of the online jewelry shop. The presented screens show the starting point of interaction with the app from the splash screen to the catalog showing categories of goods and special offers. The app provides theme photos setting the instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades which look sophisticated on general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

 

jewellery ecommerce app

 

The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. Visually, the center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention.

 

Application for a cinema

 

cinema_app_ui_design_tubik

 

Despite the Internet, movie portals and super TV-sets we have in our homes, going to the cinema is still one of the most enjoyable and popular ways to spend free time either alone or together with friends and family. We follow the premiers, check the schedules, discuss acting and special effects afterward. And obviously, it is another perspective for e-commerce challenge. Here’s a sort of creative experiment — a mobile application for a cinema chain called Cinema App. The home screen shows the list of films presented with instantly recognizable posters. Tapping on the one among them, users see a screen of the particular film with all the necessary details: genre, trailer, description, rating, as well as the showings for the particular city for a particular date.

 

cinema app interaction ui animation

 

And this is the flow of choosing and booking the seat. Selecting a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app.

 

Landing page for dance academy

 

dance_academy_website_interactions_tubik

 

Here is the animated set of interactions for the landing page of the dance academy called HeartBeat. The elegant and minimalistic layout shows prominent theme images, gives short descriptions of the activities and links to core areas of information as well as provides the contact form to get in touch. The top section includes the horizontal slider which informs users about the upcoming workshops. Scrolling down, users can read brief descriptions about the academy and the types of classes it offers with buttons enabling to learn more, and they can use the simple contact form to get in touch. The designer was inspired by the photos of dancers by NYC Dance Project, Paul B. Goode, Andrew Eccles, Paul Kolnik, and rich animation of the dancers added a special experience to scrolling. This approach creates a sort of wow-effect to support aesthetic satisfaction which corresponds to the preferences of the target audience. This is the effective example of selling the original type of services with sophisticated design solutions and a good balance of beauty and simplicity.

 

Website for herbs and spices store

 

web design UI tubik studio

 

This is the design concept of The Gourmet, the online market for herbs, spices, seasonings and all that kind of stuff. Here you can see a product page presenting a particular item with the prominent theme image, description, price, and ability to add the item to the cart. The minimalist header provides the links to the core areas of the website while hamburger menu hides the extended catalog. Moreover, here designer tried a creative experiment: this concept applies design techniques traditional in e-commerce for fashion but the type of goods is very different – they are for eating and cooking.

 

Bookshop Website

 

online_bookshop_website_design_tubik

 

The famous author Stephen King once said: “Books are a uniquely portable magic” and numerous generations of readers prove it all the time. More and more people now use the Internet as the source to both learn about books and buy them. To support this direction of e-commerce, here’s the design concept for an online bookshop Book Pitch. The interface uses light and airy background and includes several theme blogs showing news, bestsellers, categories of items and reviews from readers. The visual presentation is strengthened with slight scroll animation.

 

bookshop website animation

 

Landing page for selling exhibition tickets

 

museum website

 

Although the sphere of art doesn’t look directly linked to e-commerce, the connection really exists: more and more users are buying and booking tickets online. Here’s the interface for this service — a landing page promoting an art exhibition. The idea behind it was to make this sort of informative promotion aesthetic and unobtrusive for the user as well as highly informative. It applies the horizontal scroll with the smooth animation of cards presenting key exhibits, shows the locations and dates and prominent call-to-action for buying a ticket.

 

Landing page for an online travel gear store

 

Travel Gear Landing page by TUBIK

 

Here is the layout of a landing page: the company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes the general description of the shop, presents the ability of transition to the catalog via the description of hot offers and also has testimonials part to provide users’ opinion about the service.

 

Website for a bakery

 

Bakery website design case study tubik

 

Another example the concept of a bakery website for which we presented the full design case study here before. Here is the animated version featuring interactions with the website: home page, catalog the f offers and the page presenting a particular position. The designer followed the philosophy of minimalism which is user-friendly, attractive and informative. Dark background supports the brand image with the idea of the elite and exclusive offer as well as set the ground for sophisticated presentation of the sold items.

 

Randomizer for the online furniture store

 

tubik studio design UI

 

Here’s the concept of a randomizer that allows users to choose between many options of designer chairs in this case. However, the idea can be applied to any e-commerce digital product. This is a helpful thing as usually we don’t know what we want until we see it. Minimal and bold color palette and prominent item images make the interface helpful and intuitive for users.

 

Landing page for online farm grocery

 

Landing Page Animation Tubik Studio

 

As a famous writer George Bernard Shaw once said, there is no sincerer love than the love of food. This one is a landing page whose aim is to promote the shop of organic food. It is composed of several blocks presenting the products, highlighting some important aspects of service, call to actions and testimonials.

 

Website for the fashionable clothes shop

 

fashion clothes ecommerce website

 

Another example of design for e-commerce presents the layout of a catalog page for the website of a company selling fashionable clothes for women. The header includes the links to the global categories of the clothes and the page features the fresh arrivals with photos on models, pricing, and brief item description.

 

Useful articles

 

If you want to go deeper into the theme of design for e-commerce and learn more about strategies, principles, terms and practical cases, this set of articles can be helpful

Hit the Spot: Design Strategies for Profitable Landing Pages.

UX Design for E-Commerce: Principles and Strategies.

Business-Oriented Design. Know Your Target.

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics

Landing Page. Direct Flight to High Conversion.

Case Study: Saily App. Designing C2C E-Commerce App.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design