Tag Archives: tubik

information architecture for designers

Information Architecture: Effective Techniques For Designers.

Content is a constituent that can make any digital product valuable. Informative copy and well-thought visual elements of UI design are able to create the foundation for the successful product. However, even good content may fail in case it is structured badly. One of our previous articles was devoted to the basic points of information architecture and today’s post continues the topic.

 

In a nutshell, information architecture (IA) is a science of structuring content of the websites, web and mobile applications, and social media software. IA study aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which are believed to be a foundation of the powerful design. There are many experts working on IA development now, so loads of various techniques appear. Our article presents four efficient IA methodologies commonly used in design.

 

tubikstudio teamwork

 

Content inventory

 

Before you start constructing a layout of the product, you need to understand what elements your project will consist of. One of the first stages of building information architecture is called content inventory. The technique considers creating a list of the components for the future design project. The inventory list usually includes various elements such as title, author/provider, meta elements (keywords, description, tags), copy, images, audio, video, and document files.

 

A content inventory list assists designers at the different stages of the workflow. First of all, the list helps identify the essential content components in so that designers could plan the product structure. Knowing all the constituents, designers can place them properly. Furthermore, it’s an easy way to discuss the structure peculiarities of the project with your clients. It is much faster and easier to edit the list rather than modify the design project when it’s been started. Finally, the list of components can help designers deeply comprehend the content that results in creating appropriate connections between elements so that the design of the product would look integral.

 

tubik studio wireframing UI UX

 

Wireframing

 

Information architecture is something like a blueprint of the layout which needs to be generated by a visual scheme. The majority of designers constantly use the well-known technique called wireframing helping to create a simplified and schematic visual representation of a layout for digital products. Wireframes are similar to architectural blueprints: 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.

 

Wireframing is a fast and cheap technique to plan the information architecture of the page or screen. Designers use wireframes to outline visual and typographic hierarchy of user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general layout markedly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures and all the interactive elements on the page.

 

tubik studio design process ux

 

Wireframing gives numerous advantageous opportunities not only for designers but for the whole development team and clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get the full understanding of the project’s design. Furthermore, developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both design and development teams.

 

Organization structures and schemes

 

In our article “Information Architecture. Basics for Designers” we’ve defined four essential components of IA: organization systems, labeling systems, navigation systems, and search systems. The organization systems are the groups or the categories in which the information is divided. It helps users to predict where they can find certain information easily. To categorize the design components effectively, designers apply the technique of division into specific structures and schemes.

 

There are three main types of content structures: Hierarchical, Sequential, and Matrix.

 

Hierarchical. In one of our previous articles, we’ve mentioned well-known technique of content organization called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.

 

Big City Guide tubik

Big City Guide

 

Sequential. This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for the retail websites or apps where people have to go from one task to another to make the purchase.

 

jewellery ecommerce app UI

Jewellery E-Commerce App

 

Matrix. This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content which is ordered according to date, or some may prefer navigation along the topic.

 

health care app interactions tubik studio

HealthCare App

 

Content can be divided according to the organization schemes which are meant to classify the design components into certain groups. Here are some of the popular schemes:

 

Alphabetical. Content is organized in alphabetical order. This scheme works best when users know exactly what they’re looking for and know how to describe or name the object of search, so it can serve as a navigation tool for the users.

 

Audience. The type of content organization for separate groups of users. As an example, there are many educational resources which divide the information according to the skill level of the learners.

 

Chronological. This type organizes content by date and time. It’s often used on the news websites, event apps, and blogs.

 

Topic. Content is organized according to the specific subject. For instance, online book shops divide the products according to genres.

 

bookshop website animation

Bookshop Website

 

Content organization models

 

Designers have been working on the development of the information architecture field for a long time and so far they have established some efficient models of the content structure. Knowing them, designers can choose appropriate information structure for a product. Let’s take a look at the most common models.

 

Single page model

 

When the digital product requires a minimum of the content, the single page model is a perfect choice. Websites for a single product and with focused purpose often apply this type of data structure. As an example, we can consider design for the website promoting the brand new application. Its purpose is to make users upload the app, so generally, it provides a limited amount of copy with the focus on the button “Available on App Store”.

 

Upper App Animation

Upper App

 

Flat model

 

This model works best for the small websites or landing pages. In the flat structure, all the pages are equal and they are put at the same level of navigation, so they are interchangeably accessible for the users. This type of information structure is good for the websites which have a limited amount of the content and it’s not going to grow anytime soon. It may be a good idea to apply the flat model to the design of a startup company.

 

landing page design tubik studio

 

Index model

 

The index structure is one of the most commonly used. All the pages are equally similar to the flat model but the navigation system differs. Index model allows users to access pages via the page list which is available on every page of the product. This way, index model may contain more content and remain usable and simple for users since they can skip useless pages.

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

Strict hierarchy model

 

The model received its name, not by chance. It’s called “strict” because it gives users only one way to access the subpages: from the main page. This structure is a good choice for the digital products that have a specific purpose. For example, e-commerce websites use the structure so that the users wouldn’t skip the important information about their new offers. Also, educational platforms may apply the model in order to make the educational process gradual.

 

Co-existing hierarchy model

 

This kind of information structure is probably the most difficult to apply. It combines the ideas of a few models. Similar to index model, it provides users with various ways to access the content still it aims at guiding people through the certain path so that they would take expected actions. That’s why to create such a structure, designers need to have a bit of experience in this area. However, it may be worth trying.

web design UI concept tubik studio

 

The Big Landscape

 

Daisy model

 

This type of content structure is common for educational websites and apps as well as the others which require users complete certain tasks. The daisy structure is built that way so users return to a homepage (sometimes other specific points) after they accomplish the tasks. For instance, many to-do apps automatically return the users to the main screen when they point the task as complete.

 

upper app UI design case study

Upper App

 

Information architecture is vital for the powerful design but it needs to be done right. The various IA techniques we’ve discussed above can be combined and applied depending on the product and the clients’ requirements. Moreover, they are constantly improved since the design field never stays still, so many new methodologies may appear soon. Our next article will continue the topic of IA so stay tuned!

 

Recommended reading

 

A Practical Guide to Information Architecture by Donna Spencer

 

The ultimate guide to information architecture

 

How to Make Sense of Any Mess: Information Architecture for Everybody

 

Information Architecture: For the Web and Beyond

 

Information Architecture Basics


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

design events benefits

5 Big Benefits of Attending Local Design Events

Being a designer is not only about pure creative process. Design is also about communication with colleagues, managers, clients and experts. This connection can be done not only in the flow of current projects but also at a variety of design events held all over the world. And, as the famous author and speechwriter James Humes stated, «The art of communication is the language of leadership» which works prominently in creative spheres of human activity. So, today let’s briefly review what are the key benefits which designers can get from attending specialized events like conferences, meetups, workshops and so on.

 

1. You absorb knowledge and inspiration from experienced designers

 

If you have had the chance to read about art education a couple of centuries ago, perhaps, you learned the stories how great masters started their path from apprenticeship for masters of that time. It was the way which in the case of appropriate diligence and patience could open the door to the world of genuine great art. Centuries have passed, generations have changed, but this way still hasn’t got lost in time: we learn the secrets of the job from those who have already got them through practice. That is one of the reasons to attend the design event, especially for those who only start their career in the field. Some of the speakers will give you useful tips on design tools while others will share their experience in methods of time management and collaboration. Some of them will tell you about new trends in design while others will show the flows of real projects. There is even a chance that there will be speakers who will show you the methods and ideas you’d never like to try — and even this result is positive at it saves your time and effort for testing all them by yourself. Don’t waste the opportunity to take what they are ready to share. Surely, to get the chances of positive experience higher, it’s advisable to check the program of conference or meetup beforehand.

 

You may like recognized designers more or less but remember: they ARE already well-known and successful. That means there always exists something you can learn from them. Analyze, get inspired, try to see the best features so that you could get the technique. It was effective hundred years ago in old-school art education and it still works now. 

 

2. You get live communication with experts

 

Reading the thoughts provided in the previous point, it’s easy to argue: why would you need to attend the real event if tons of them can be found via the Internet in videos, photo workshops, podcasts, articles, and books? The reason is simple: all those ways of getting professional knowledge and training are great and helpful, but none of them can fully replace the experience of live communication. The precious moments when you can ask the question right in the process of live talk flow are irreplaceable. Moreover, make no mistake: conferences and meetups are the places where everyone, including speakers and organizers, is ready and open to communicate with you while in ordinary days full of creative search, management and loads of current tasks they do not plan their time to answer the questions from other designers. Cool if they can do it but it happens not so often whereas for the professional events it is a natural state of things: everyone goes there to communicate.

 

One of the upcoming local events of that kind called Shuba Design Conference will be held in Dnipro, Ukraine in the late May. Its philosophy is all built around the idea of providing the space for effective and fruitful communication of creative people both in form of the speeches from the experts and live brainstorming with colleagues. This year the motto of the event is «Design beyond the borders» setting the new perspectives and new flows of creative energy in the sphere. Furthermore, the organizers bring out the opportunities for designers to participate in the contest of posters «BORDER STUDIES» and express their ideas in the artworks which will be accepted until 14 May. If you are interested to know more, check the details here. Let us know — we’ll be happy to get in touch!

 

design conference shuba ukraine

 

3. You can get the qualified feedback on your work

 

While most design meetups set the platform where experts share their knowledge and experience, some events also create the foundation for getting live feedback on design portfolios. One of the founders of this movement worldwide is Behance, the well-known design platform for portfolios in a variety of creative directions. Behance Portfolio Reviews held in different corners of the world let every designer get a professional and objective review from the local design community. This is one more upcoming design event we are looking forward to this May — Behance Portfolio Reviews Dnipro inviting young designers to present and discuss their portfolios.

 

behance portfolio reviews dnipro 

 

4. You set new business contacts in design sphere

 

One more big reason to attend design events is directly connected to business issues: this is usually the fruitful ground for making new contacts useful for your career. It works the same as at any other specialized event: you can get in touch with other designers for collaboration on complex projects as well as you can meet new potential clients or investors. Again, live communication and real impressions make a considerable impact on decisions which can change the prospects of individual designers or even design teams for better. 

 

5. You get refreshed from your routine and check the trends discussed at the moment

 

Last but not least is the reason of refreshment, actual for professionals from any creative sphere. Getting dip into specific tasks and working on several design projects simultaneously, artists really need that breath of fresh air which will reboot their creative energy and give new directions of vision. So, if you see the event with interesting speakers or themes actual for you, don’t hesitate to give yourself a moment of new experience: it will take you away from you current work for some time, but it will let you get back with new ideas and impressions absorbed from the design community.


Welcome to get more details on Shuba Design Conference (Dnipro, Ukraine, 27 May 2017)

Welcome to get more details on Behance Portfolio Reviews (Dnipro, Ukraine, 13 May 2017)

ux design for ecommerce tubik blog

UX Design for E-Commerce: Principles and Strategies.

Quite long time ago known British author and scholar Thomas Gray stated: «Commerce changes the fate and genius of nations.» For the last decade, commerce has got hundreds of new ways to reach the customer, especially with the leap of innovation in technology and its growing role in everyday life. More and more buyers are turning to the experience of shopping online, more and more sellers start new channels and methods responding this trend. And this is the sphere in which design of positive user experience directly moves the stakeholders to profits. Today we are talking about UX design for e-commerce.

 

What is E-Commerce?

 

As we mentioned in our free ebook «Design for Business», in general terms, e-commerce (Electronic Commerce) is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.

 

The last decade witnessed booming e-commerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

The role of design for e-commerce

 

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful» says CEO of Amazon Jeff Bezos, and it’s hard to argue. Obviously, the success of e-commerce activity depends on several factors among which:

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.

 

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogs etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.

 

tubik studio landing page toys

Handmade Toys Landing Page

 

On that ground, let’s check the details in three key perspectives whose combination in design makes success for e-commerce platforms: business aspect, UX aspect and UI aspect.

 

Business Perspective: Branding and Promotion

 

Websites and mobile applications for e-commerce are (well, should be) always the products created within a particular business scheme. It means they are the part of a certain business plan with the specific goals in mind and the planned ways to achieve them. Therefore, design for this sort of products definitely starts much before the first real line appears on the paper or screen. There are several important issues which should be considered and agreed upon before actual design starts.  Among them we would mention the following:

 

USP of the product. It’s essential to set which benefit (or set of benefits) will differ this website or application from the others and make it the core value presented via design.

 

defined target audience. In e-commerce, it’s important to set who your buyers are from the initial stage of the project. Knowing their age and culture, potential problems and wishes, level of tech literacy and trust to the idea of online shopping, the social circles influencing them and aspects forming their habits, designers can be more precise searching for the shortest way to successful purchase.

 

positioning, tone and voice of the brand. How would you describe your brand? Is it friendly? Fun or serious? Mass or luxury? Easily available or exclusive? Does it communicate to potential buyers in formal, informal or semi-formal style? Does it open much or mostly keeps reserved silence creating the mystery around the offered goods? These questions may seem far from business which has to be all about finance, profits, points of sales and other stuff of that kind. Still, these issues present the number of features which will set the future brand image. And design is somehow going to be its face, outfit and make-up.

 

marketing and sales channels. No doubt, it’s hard to immediately set all the channels for selling and promoting the future product; however, effective business planning means thinking over the core of them from the start. It will enable design team track and support the consistent experience of both getting to product and actually interacting with it. Even more, designers take active part in setting and strengthening marketing and sales via variety of means from branded items, landing pages and product videos to exclusive photos, posters and banners attracting customers to the platform where they actually can buy.

 

— type of business relations. Type of business relations based on target customers deeply influences the core aspects of UX design. Set from the start whether it’s B2C, B2B or B2C to create proper layout and predict possible user behavior.

 

typical environment of use. Designers need to know when, where and in which conditions users will typically use the website or app: these factors have a considerable impact on the decisions about layout, color scheme, typography, transitions and interactions, which all need to have the global objective to make the process of shopping easy, quick and enjoyable.

 

gym landing page concept by Tubik

Gym Landing Page

 

It’s easy to see that all the mentioned points directly influence design solutions as well as techniques and approaches for their realization. It means that the best way to go is to involve designers into the discussion together with stakeholders and marketing specialists at early ideation stage if it’s possible; if not, then specification and tasks provided to designer afterward have to include maximum information about those aspects. In case you work in outsource design team, make sure you get this information to be more concentrated on the key aspects of the task, and if not, communicate with the clients as long as it’s needed to get all those points clear. This communication will save many hours of iterations, which happens in cases when design is started out of the thin air without the basis of information and goals.

 

UX perspective

 

Talking about e-commerce, it’s vital to understand that selling the goods once via the website or mobile application is the minimal program of actions. What stakeholders of the business really aim at is having this user buying via their website or app again and again. User retention is the direct condition of growing profits. And we have to admit that this aspect makes e-commerce sphere highly attractive for designers. The objective which should be achieved is clear and simple: people have to reach the e-commerce platform and buy items offered on it.

 

Make no mistake, positive user experience is the key thing for user retention. In case of e-commerce, the four key aspects of UX are quite clear:

  • utility lies in the nature of the product: it helps users to choose and buy things and services they need.
  • usability has to make the customer journey clear and easy, without unnecessary clicks, time lost on loading overloaded pages or inconvenient menu, frustration of not getting feedback from the system etc.
  • accessibility has to bring up design which can be used by different categories of users, for example people with disabilities (dyslexic, color-blind etc.) or low level of tech literacy.
  • desirability means that the app will get the look and feel which will make the experience enjoyable and users will wish to get back again.

 

bookshop website animation

Bookshop Website

 

Among the core aspects dealing with the mentioned issues and considered from the early stages of design like UX-wireframing and user research, we would mention the following.

 

Intuitive navigation

 

You can have an amazing website with stylish and trendy design and breathtaking images, but the success of it will be measured not by the number of «wows» it will bring out. The efficiency is measured simply: by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

— what company or brand they are dealing with

— what page they are at

— where the menu is

— how they can get back to home page or catalog

— where is the search and filters

— how long the page-loading process is going to take

— how they can see the detailed information about the item

— how they can choose between the option for the same item (color, size etc.)

— how they can pay for the item

— how they can save the items they would like to get back to later

— how they can contact the seller

— how they can see the rating and reviews of previous buyers etc.

 

Bakery website design case study tubik

Bakery Website

 

Every button, link and card can play the crucial role and change the conversion significantly. What’s vital to bear in mind: in terms of intense competition we have in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations. What they demand from e-commerce is the experience which is faster, easier and more convenient comparing to going to the actual store. If you don’t give it to them, they will look for it somewhere else.

 

Sales funnel

 

Sales funnel (in other words — purchase funnel) is a technique that moves the customer through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase. As we described before in the book, basic sales funnel includes the following stages:

 

  • Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.
  • Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.
  • Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.
  • Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.
  • Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.
  • Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.

 

In terms of e-commerce, sales funnel is supported with diversity of functions digital products can offer. Awareness of the principles of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source, for example, social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling users to buy.

 

home page landing tubikstudio

Comics Online Shop

 

Effective presentation of the items

 

The layout of the product pages or screens is another core aspect to think over. On the one hand, it’s advisable not to overload the page with too much information which will overwhelm users and can distract their attention from the major goal — to make the purchase. On the other hand, users aren’t ready to go from one page to the other to get different information about the item. Therefore, the designer has to take the time for thorough research of the issue and find the right balance of data given on one screen. The analysis of target audience and user testing can give the clues what information is required by the target audience for the specific categories of items or services.

 

jewellery ecommerce app UI

 

jewellery ecommerce app

Jewellery E-Commerce App

 

UI perspective

 

Being concentrated on not only logic and transitions but also looks and style, UI design stage also contributes much to the success of the e-commerce project. It is the aspect which creates visual performance and sets the solid ground for the desirability of the interface and positive emotional feedback from the buyer. At UI design stage for e-commerce, designers have to find the general stylistic concept which will support UX aspects mentioned before and will give the online point-of-sale the attractive looks. Some aspects, which designers have to take into account in this perspective, are:

 

— choice of colors that correspond to the brand image and strengthen emotional feedback

 

— setting the style corresponding to the nature of the commercial offer: reaching the website, people should instantly understand if it sells household goods, fresh vegetables, trendy clothes, exclusive devices or anything else

 

— visual hierarchy which makes the core zones of interaction instantly noticeable

 

— general harmony of perception which sets the feeling of aesthetic satisfaction supporting positive user experience.

tubikstudio ui animation website design

Design Studio Website

 

Points to consider

 

For the bottom line, here’s a simple check-list for some essential aspects designers would rather consider working on e-commerce projects:

 

— Know the buyers: user research will help to get the needs and wishes of target audience.

 

— Have users informed: make the screens or pages filled with information and functionality users really need for making purchase.

 

— Keep design consistent: not only does the website or app itself need consistency of design for all the screens in terms of general branding, but also social networks, print materials and actual point-of-sales appearance if they exist.

 

— Refresh the experience: minor changes or attractive details added to the interface from time to time without breaking general visual consistency can give the feeling of refreshment, like new looks of mannequins do in the window displays of the shop.

 

— Check your solutions: user testing can have a great impact on understanding the factors that boost conversions. Ideally, it should be applied not only in the process of design but also after the launch of e-commerce platform on the basis of real user interactions and troubles which can arise.

 

— Be careful about revolutions and wow-effect: the power of habit plays the big role in the products of this kind. Choosing layout, menus or icons, which stand too far from the ones users are generally accustomed to, can bring confusion and frustration. For example, usage of any other image instead of the magnifying glass to mark the search field can result in bad user experience as buyers know that visual symbol and will look for it. So, making this sort of experiments, take time to test them well.

 

— Respect the buyers: remember, that they are not abstract metrics — every figure in conversion report is about real people. Look for the interface that will respect their time, effort and needs and it will bring positive experience of shopping for both sides.

 

Landing Page Animation Tubik Studio

Organic Food Shop

 

Recommended reading

 

Here is a bunch of links to the articles and design collections which could provide further interesting explorations of the topic:

 

Two Types of User Motivation: Design to Satisfy.

 

The ultimate guide to designing ecommerce websites

 

Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid

 

Designing for 5 Types of E-Commerce Shoppers

 

20 Common UX Mistakes In Ecommerce Websites

 

Everything You Need to Know About Designing for eCommerce


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

Welcome to read or download the free e-book «Design for Business»

information architecture for designers tubik

Information Architecture. Basics for Designers.

The World Wide Web contains a tremendous amount of information which is hard to imagine unstructured because a human brain wouldn’t be able to perceive any single thing. People got used to seeing content and functionality of the digital products as many of them are now: structured and easy to use. However, it doesn’t occur unintentionally. Designers and developers take a responsibility of constructing content and navigation system in the appropriate way for users perception. The science that assists experts in the content structuring is called information architecture. Today’s article is devoted to the essence of information architecture and presents the basic points every designer should know.

 

What’s information architecture?

 

Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software. An American architect and graphic designer, Richard Saul Wurman, is considered to be a founder of the IA field. Today, there are many specialists working on IA development who have established the Information Architecture Institute. According to the IAI experts, information architecture is the practice of deciding how to arrange the parts of something to be understandable.

 

Information architecture aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives. Information architecture has become the fundamental study in many spheres including design and software development.

 

UX design process tubik

 

The role of information architecture in design

 

Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which they believe is a foundation of efficient design. IA forms a skeleton of any design project. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If the users face first bad interaction, they may not give the second chance to your product.

 

Many companies don’t see the importance of information architecture because they think it’s impractical. It’s hard to argue that IA takes some time to create it and requires specific skills to do it efficiently. However, powerful IA is a guarantee of the high-quality product since it reduces the possibility of the usability and navigation problems. This way, well-thought information architecture can save both time and money of the company which otherwise they would have spent on fixing and improvement.

 

IA and UX design

 

After reading everything written above, many people may have the question: “Isn’t IA the same as UX design?”. Technically, these terms relate to each other but they are far not the same. IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan navigation system.

 

UX design means much more than content structuring. In the first place, UX designers aim at making pleasant interaction model, so that users feel comfortable using the product. They encompass various aspects influencing users’ behavior and actions such as emotion and psychology when the IA experts stay focused on the user’s goals.

 

Let’s get this straight: good information architecture is a foundation of efficient user experience, so the IA skill is essential for the designers. Effective IA makes the product easy to use but only united with design thinking the product has the powerful user experience.

 

tubik studio design process ux

 

IA system components

 

If you want to build strong information architecture for the product, you need to understand what it consists of. Pioneers of the IA field, Lou Rosenfeld and Peter Morville in their book “Information Architecture for the World Wide Web” have distinguished four main components: organization systems, labeling systems, navigation systems and searching systems.

 

Organization systems

 

These are the groups or the categories in which the information is divided. Such system helps users to predict where they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and Matrix.

 

Hierarchical. In one of our previous articles, we’ve mentioned a well-known technique of content organization which is called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.

 

web ui design city guide

Big City Guide

 

Sequential. This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for the retail websites or apps, where people have to go from one task to another to make the purchase.

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

Matrix. This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content which is ordered according to date, or some may prefer navigation along the topic.

 

mobile app design tubik studio

MoneyWise App

 

In addition, content can be grouped according to the organization schemes. They are meant to categorize content the product. Here are some of the popular schemes:

 

Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for the users.

 

Chronological schemes. This type organizes content by date.

 

Topic schemes. Content is organized according to the specific subject.

 

Audience schemes. The type of content organization for separate groups of users.

 

book swap app tubik studio

Book Swap App

 

Labeling systems

 

This system involves the ways of data representation. Design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create the labels which represent loads of data in few words. For example, when the designers give contact information of the company on the website, it usually includes the phone number, email, and social media contacts. However, designers can’t present all of this information on one page. The button “Contact” in the header of the page is a label that triggers the associations in the users’ heads without placing the whole data on the page. So, the labeling system aims at uniting the data effectively.

 

gym landing page concept by Tubik

 

Gym Landing Page

 

Navigation systems

 

In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content. It’s a complex system which employs many techniques and approaches, the reason why it’s wrong to describe it in a short paragraph. So, we’ll go back to the topic a bit later on our new blog’s article.

 

Searching systems

 

This system is used in information architecture to help users search for the data within the digital product like a website or an app. The searching system is effective only for the products with loads of information when the users risk getting lost there. In this case, the designers should consider a search engine, filters, and many other tools helping users find content and plan how the data will look after the search.

 

tubikstudio-ui-ux-design

 

To sum up, we can claim that information architecture is a core part of the powerful user experience design. Efficient IA helps users quickly and easily navigate through content and find everything they need without striking a blow. That’s why designers are recommended to learn the basics of the IA science.

 

The topic of information architecture is wide and there are more interesting and useful aspects. Our next article on this theme will be devoted to the various techniques and methodologies which designers employ to create efficient IA. Stay tuned!

 

Recommended reading

 

IA for the Web and Beyond

How to Make Sense of Any Mess: Information Architecture for Everybody

Information Architecture Basics

The Difference Between Information Architecture and UX Design


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

home budget app case study

Case Study: Home Budget App. UI for Finance.

Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.” Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves. 

 

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.

 

Task

 

UI/UX design for the web and mobile versions of a personal budget manager

 

Process

 

Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily. 

 

For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have the high level of legibility for both letters and numbers. 

 

Dashboard

 

The web dashboard was aimed at presenting extended stats for the particular period. The choice of generally dark interface enabled the designer to create the attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

 

Dashboard_home_budget UI

 

With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in. 

 

The cards present such information blocks of data:

— the menu with quick access to popular categories of expenses

— information on total expenses and frequency of transactions

— the list of popular transactions

— the cloud of expenses and weekly average rate in comparison to the previous period

— the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis

— the map with the pins marking the most frequent locations of spending money

— the block of recommendations based on financial operations of the period.

 

Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance navigation and make interactions intuitive. 

 

Home_budget_app_dashboard_animation_tubik

 

Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.

 

Mobile UI

 

The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.

 

home budget app mobile screen

 

Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.

 

home budget app mobile notifications

 

To get the access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders. 

 

Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.

 

Home Budget app interactions motion tubik

 

The mobile interface was also supported with animations. The one above shows the interaction with the hamburger menu divided into three sections.

 

home budget app interaction animation tubik

 

Another piece of animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.

 

home budget app case study

 

This project has started the deeper immersion into the world of digital products for finance management for Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.


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

tubik free podcast design business terms

Tubik Podcast #1. Business Terms for Designers: USP and MVP.

For the recent year, here in Tubik we have been sharing some stuff for design community via blog and free ebooks. Still, the more people are involved, the more diverse connections are needed. Today we add a new way of sharing — Tubik Podcast, a series of free audio talks devoted to various aspects of design. The first track here starts the set called «Business Terms for Designers» and gives insights on what is USP and MVP. Hopefully, it will be helpful for the design community. Welcome to listen and follow the updates!

 

If you want to get the set of three episodes devoted to the theme of business terms and processes discussed in design aspects, subscribe here and get them right into your inbox in the nearest 24 hours.

 

 

If you are interested to read more, welcome to read or download our free ebooks. Stay tuned!

UX design process tubik

7 Key Motives to Invest Time and Effort in UX for Digital Product

Even if you are far from the design field, you must have heard of user experience (UX), since it has been a buzzword for the past few years. In a nutshell, it is the general attitude and emotional feedback that user has after interacting with the product. UX is based on several key factors such as usability, utility, desirability, attractiveness, the speed of work etc. Nowadays, user experience is thought to be as important as the visual identity. However, some companies still doubt if the UX design is a must-have or it’s just a trend which is a waste of time and money. Today we offer you to find out if UX design really matters and how it can help your business succeed.

 

Why does UX design matter?

 

Nowadays many companies say about the importance of effective UX spending money and time on its development. But what makes them think so? It is already proved that the success of the business heavily depends on how much users enjoy the product. UX design aims at enhancing user satisfaction by making products more useful and easy to use.

 

Some people may think that UX is based on the visual elements of the design but it’s much more than that. UX design is a complex process which consists of many stages including user research, wireframing, prototyping, visual and graphic design, animation and testing. It requires time and knowledge to create effective UX, the reason why it may involve additional innvestments not always expected by companies. However, UX design is beneficial for both startups and already existing products since it assists in many aspects which form the successful product including user engagement, usability, utility, and conversion rates.

 

If you have a complex website such as retail, it is crucial to have the effective UX design. It helps to organize content on the pages in the best way for the users’ perception and make navigation clear. Without appropriate UX design, there is a risk of losing users because they may find your product too complicated and useless.

 

The statistics collected in recent years show that 95% of mobile apps are quit within a month. That’s why to keep new users utilizing your app or website, the product should have pleasant experience which will make them stick around. Despite the given stats, according to User Experience Survey Report, only half of the companies invest time and effort in UX for the digital products.

 

Conducting the research for this article, we’ve distinguished seven key aspects of the successful product which can be managed via effective UX design.

 

UI design product management

 

Effective usability

 

Today the word “simple” isn’t associated with something boring. It is now the crucial aspect of the successful product. Don Norman in his book “The Design of Everyday Things” says that two of the most important characteristics of good design are discoverability and understanding. Users expect products to be simple and clear in use so that they could feel confident of what are they doing and don’t take much effort. This aspect heavily depends on UX design of the product.

 

UX designer’s objective is to create consistent experience for the digital products to keep users mind at ease. An effective UX design guides visitors through the websites and apps showing them what you can offer. UX designers can conduct deep user research and analysis and do some testing on few representatives in order to eliminate unnecessary, difficult and inexplicit options and make the digital product useful. What’s more, UX experts can create effective onboarding of the product which introduces people to the features of the app making users feel welcomed and not afraid.

 

 Tubik-Studio ux design

 

Driven user engagement

 

User engagement is a measurement of meaningful actions taken by the users and it’s one of the core aspects of the profitable products. Every company aims at creating the product with the high level of user engagement but not many of them know that good UX is a solution to this issue. Well-thought UX always includes various techniques that make users take the expected actions.

 

One of the trending methods in UX is gamification which is the technique of exerting game elements into the non-game environment, such as websites and mobile applications. Gamification brings the element of fun to the websites and applications. Moreover, game mechanics are the powerful motivators for the users. As the example, you can set the tasks for the users and give the awards to those who accomplish them. Curiosity and excitement drive people to continue performing various tasks and spend more time on the app or the website. UX experts are able to influence users’ behavior and motivate them as “players” to do the expected actions via game elements such as a challenge and rewards.

 

Unique product

 

It’s hard to say how many apps exist and how many of them have failed at the very beginning of their journey. There are loads of similar and even identical products on the market so businesses are looking for the answers of how to make users choose their products. UX experts can predict users’ reaction to your product by analyzing target audience needs and requirements. If you bring people the product with pleasant experience which is enjoyable and satisfying users’ needs, you may be sure they will distinguish your app from the others and give the preferences to it.

 

Tubik Studio UI UX designer

 

Saving money

 

UX design isn’t a free or cheap service still, it’s much cheaper than fixing usability problems when the product is on the market. Based on user research, UX designers accurately choose the set of features and plan the user interaction processes to exclude possible usability problems. In addition, UX experts carry out testing on some representatives of the target audience to analyze their reaction and improve the issues. UX design on the stage of product creation costs significantly less than making changes in your product after it’s been built.

 

Customer loyalty

 

Nowadays customers are extremely demanding and the unpleasant experience can make them annoyed in a second and they won’t return to the product again. Unhappy users will never be loyal to your product, so you have to make sure the people enjoy your product. UX design is a right way to your clients’ hearts. If your product is associated with the enjoyable experience, users will doubtfully change it to something else. What’s more, happy customers are more likely to recommend your brand to the others.

 

UI research web and app design tubik

 

High conversion rates

 

According to Nielsen Norman Group, the conversion rate is the percentage of users who take the desired action. The archetypical example of conversion rate is the percentage of website visitors who buy something on the site. UX designers master many techniques of the target audience analysis that allows them to influence on improving conversion rates. Deep user research and analysis help them defining the problems of usability and reasons making customers leave the product. Knowing the pain points of the product, you can solve them to increase conversion rates.

 

Positive brand experience

 

Brand recognition depends on not only the visual image but also the provided experience. Many users remember your product and form their opinion about it during the first time they’ve used the product. The first experience is vital and if it’s bad, your brand risks losing the customers. Good UX design can guarantee your brand positive experience. Providing product which users enjoy to use, you improve your brand recognition, because users don’t forget the things they have enjoyed.

 

UI design product management

 

Powerful UX design is obviously beneficial for businesses. It can be hard to see all its value but the fact remains: UX is an essential part of the successful product. It’s a tool which helps solve the problems of such aspects as usability, utility and user engagement. And finally, compelling UX design can save money and efforts which otherwise you would have invested in fixing and improvement of the low-quality product. What’s more, on this way you risk losing users who will not give your product the second chance after facing first bad interaction. Considering all the points said above, we may state that the companies get much more from UX design than they spend on it.

 

Recommended reading

 

Here are some articles providing further interesting explorations of the topic:

 

UI/UX Glossary. Steps to Usability.

 

The Business of User Experience

 

User Experience is Brand Experience

 

Good UX Is Good Business: How To Reap Its Benefits

 

The business value of User Experience (UX) Design

 

Conversion Rates


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

tubikstudio homepage design

Best Practices for Website Header Design

Everyone knows: there is not the second chance to make the first impression. In the sphere of digital products, this eternal truth works in terms of high competition and incredible diversity. No doubt, some zones of the webpage or mobile screen are particularly important and effective in this aspect. Today we are going to discuss one of them in deeper focus: the header of the website.

 

In the issue of UI/UX glossary devoted to the web design terms, we have already provided the brief overview of what is a header. Today let’s look a bit closer at the topic and discuss what are the functions of a header and recommendations for its design. In addition, we will show a bunch of web design concepts applying different approaches to header design.

 

What is a header?

 

In web page layout, header is the upper (top) part of the web page. It is definitely a strategic part of the page as the area which people see before scrolling the page in the first seconds of introduction to the website. Being somehow a sign of invitation, header should provide the core information about the digital product so that users could scan it in split seconds. In design perspective, header is also the area making the broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in the website layout.

 

tubikstudio ui webdesign

 

The presented concept shows the home page for the online bookshop selling comics. The top horizontal area aka header presents the logo lettering showing the name of the website and the core navigation around: links to the catalog of items, fresh and special offers, blog, action figures, an icon of the shopping cart typical e-commerce websites and the icon of search.

 

What can a header include?

 

Headers can include a variety of meaningful layout elements, for example:

  • 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. On the basis of design tasks, designers, sometimes together with marketing specialists, decide on the strategically important options and pick them up from the list or add the others.

 

Let’s have a look at a couple of examples to see which of the mentioned elements designers placed in the header for particular websites.

 

tubikstudio ui animation website design

 

This is the website of an interior design studio. The upper part of the page presents the sticky header which stays in the zone of visual perception all the time in the process of scrolling. It is divided into two blocks: the left part features brand logo while the right part presents the interactive area with links to several information blocks like «Product», «Studio» and «Press» and call-to-action button «Shop» marked out with a shape. The central part of the header uses negative space for visual separation of these two blocks.

 

tubikstudio homepage design

 

Here is another sample of the webpage with a bit different approach to the header design. This time the composition is built around the center featuring the logo and brand name. Left and right side are balanced around it with two links each allowing users to scan quickly and move to the information blocks they are interested in.

 

Why is header important?

 

There are several issues why the header is a vital element of many websites.

 

The first thing to consider is eye-scanning models which show how users interact with a webpage in the first seconds. 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.

 

In brief, when people visit the website, especially the first time, they do not explore everything on the page carefully and in detail: they scan it to find a hook which would catch their attention and convince them to spend some time on the website. 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. Let’s check what are the schemes provided for them in the research.

reading pattern

Guttenberg Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy. As it can be seen from the scheme we found in Steven Bradley’s research, it marks out four active zones — and two of them go across the typical header area.

 

reading pattern zig-zag

Another scheme features Z-pattern and the presented zig-zag version is typical for pages with visually divided content blocks. Again, the reader’s eyes go left to right starting from the upper left corner and moving across all the page to the upper right corner scanning the information in this initial zone of interaction.

 

f_reading_pattern_eyetracking

 

One more model is F-pattern presented in the explorations by Nielsen Norman Group and showing that users often demonstrate the following flow of interaction:
 

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

 

All the mentioned models show that whichever of them 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.

 

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind: «People judge the quality of a website in just a few seconds and a second impression is something absent on the Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure».

 

Another thing to consider is that the header can become a great help in presenting the essential data to the user quickly and providing positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service.

 

Design practices

 

Readability and visual hierarchy

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays a vital role. The user has to be able to scan and perceive this basic information as fast as possible without any sort of additional effort. Otherwise, you risk providing the non-user-friendly interface.

 

online magazine design tubik studio

 

The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

web design UI concept tubik studio

 

Here is another website whose layout is built on the broken grid, so the header corresponds to this approach. The left part of the header is visually longer and consists of four elements: the logo and the links to three data blocks, while the right part is shorter and includes only two layout elements: search and call-to-action button market out with the shape and colored for the high level of contrast.

 

One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites which do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the core elements of the layout active and available during all the process of interaction.

 

Hamburger menu

 

Another design solution which is quite popular in perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of horizontal lines looks like typical bread-meat-bread hamburger.

 

hamburger button tubik studio

 

This button is usually placed in the header and nowadays it is a typical element of interaction. Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalistic and full of air as well as save the place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

 

tubik studio ice ui website

The presented web design concept shows the version of hamburger menu. As the menu of the website contains many positions, the designer uses this technique placing the hamburger button in the area of initial interaction — top left corner. It allows creating the header supporting general minimalistic style of the website. The horizontal area of the header is divided into two zones: the left zone presents branding and a short introduction of the website colored in red and keeping visual consistency with visual performance of the headline and call-to-action element of the page; the right zone features icons of social networks and search icon. The central part of the header is left empty which adds some air and balance to its design and works as a negative space separating two different functional blocks.

 

tubik studio web UI design

 

This design concept presents the website with an original structure of the page, leaving the wide light margin in the left part of the page, with the brand name and logo in the top left part which is the first point of scanning. The other part presents interactive zone and has its own header composition: hamburger button to the left and four core links of transition to the right. As this example of interaction shows, hamburger menu allows the designer to organize numerous theme blocks of information and provide effective visual hierarchy. 

 

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against hamburger menu are based on the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

Fixed (Sticky) header

 

Sticky headers present another trend able to boost usability is applied effectively. Actually, it enables to provide users with navigation area available at any point of interactions, which can be helpful in terms of content-heavy pages with long scrolling.

 

Tubik studio UI design

 

The presented design concept of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalism principles featuring brand name lettering as a center of the composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

website design for photographers

 

Here is one more design concept featuring creative approach to the header design. The initial view of the home page includes the extremely minimalistic header: it shows only social icons and the search. However, scrolling down users get the sticky header with quite a traditional set of navigation items: the first element to see on the top left part is hamburger button hiding the extended menu, then branding sign followed by the links to thematic information blocks. The composition is finished with the search placed in the top-right part of the page in all the process of interaction with the page and supporting the feeling of consistency.

 

Double menu

 

Double menu in the header can present two layers of navigation. We have shown the example of such trick in one of the recent case studies for a bakery website.

 

Bakery website design case study tubik

 

As you can see, the website also uses a sticky header which consists of two levels of navigation. The upper menu shows the links to social networks, the logo, search, shopping cart and hamburger button hiding the extended menu. The second line of navigation gives instant connection to the core interaction areas:  products catalog, locations for the point-of-sales, news and special offers, information about the service and contact section. Visual and typographic hierarchy makes all the elements clear and easily scanned providing solid ground for positive user experience.

 

The bottom line is simple here: header of any website is the strategically vital zone of interaction for any website. Each particular case requires its own approach which will be informative and usable for the specific target audience. User research can provide the good basis for the design solutions which can follow quite traditional forms of header organization or require totally new perspective.

 

Recommended reading

 

Here is a bunch of links to the articles and design collections which could provide further interesting explorations of the topic:

 

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

 

F-Shaped Pattern For Reading Web Content

 

Sticky Header Usability: Making Menus Part of a Great User Experience

 

30 Interesting Examples Of Headers In Web Design

 

Headerlove: curated collection of headers design


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

Welcome to read the UI/UX Glossary: Web Design

badges_illustration_tubik_design

Gamification in UX. Increasing User Engagement.

The user-centered approach, which strives for creating products highly responding to the user’s needs, has become the major philosophy behind many projects. Following this method designers constantly search for the new techniques improving user experience which depends on various aspects including emotions. The thing is that users expect a product to be simple and enjoyable in use, so the idea to add a “fun” element to the UX came as it is. But how to make the product fun and enjoyable in use? The technique called gamification was created to solve the problem. Let’s find out what’s the method of gamification in design and how it can improve UX.

 

What is gamification?

 

When we say word “gamification” in the context of design, it can be easily mistaken with the game design. Still, these terms hardly relate to each other, even more, they are opposite in many aspects. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. For example, if you want to encourage the users to interact more with your application, you can add the game element such as a challenge. They can be challenged to check-in every day during a week and be rewarded if they do so.The thing is that people like having a clear goal and even more to be rewarded after it’s achieved, so such a challenge would doubtfully pass unnoticed among the users. This way, designers are able to influence users’ behavior and motivate them as “players” to do the expected actions via game elements such as a challenge and rewards.

 

toonie alarm stickers ios tubik

Toonie Alarm

 

Types of game mechanics for UX improvement

 

Gamification is a complicated design technique which requires using various game mechanics referring to the interactive UI elements. The main task for designers applying gamification is not to turn the product fully into a game. For this reason, there have been distinguished the effective game mechanics that are commonly used in design. Let’s see what they are.

 

Challenge

 

Human nature always makes us take the challenges and prove that we are able to handle them. So, a challenge is thought to be one of the most compelling game elements motivating people to take an action which can be a great tool on the way for UX improvement. In order to enhance the challenge effect, it may be a good idea to use some kind of rewards, so that users could feel even more motivated.

 

upper app UI design case study

Upper Streak Challenge in Upper App

 

Points

 

To measure the players’ success, many games use the points system. The gamified product can apply the same scheme that helps both users and stakeholders: the first sees their achievements and the others can estimate user engagement of the website or application. It is not necessary to make the count of points in the rating form. It may be just the number of check-ins or video views.

 

Badges and stickers

 

When users complete the challenge or gather a certain number of points, they can be awarded the badges or stickers. This kind of virtual rewards is often used in video games, so people are familiar with them. Stickers have gained people’s love long ago, therefore this kind of rewards will be appreciated. Besides, the badges and stickers give much room for the creative experimentations since they can be designed in various ways. Such rewards can become the additional drivers of motivation.

 

badges_illustration_tubik_design

PukaPal Badges

 

ui animation design tubik

Toonie Alarm Stickers

 

Leaderboards

 

The thing making the challenge even more interesting for people is the competition. Not many things can motivate users better than the desire to be the leader. The list of the “players” ranked in the order “Who’s got more badges” can increase users’ enthusiasm. However, in some cases, it may work contrarily demotivating people due to high ranks of the others. That’s why this game element is recommended to be applied carefully.

 

snake battle app UI design

Snake Battle

 

Journey

 

This game mechanic aims to make the process of interaction with the product as easy and understandable as possible. The user should feel as the real player starting the personal journey of the product usage. For example, on the onboarding page from which the user starts, they can be offered an introduction to the features, so that users won’t be afraid to make a mistake. When the journey continues, it is recommended to use the method of “scaffolding”. It means to disclose features progressively as the users become more experienced in using the product. Such an approach allows people to avoid errors and makes the product pleasing to use. Also, the journey element may be supplemented with the progress feature. Providing the information about the progress of the user’s journey, we can inspire them to continue.

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Constraints

 

Many of us may think that it is not funny at all, still, there is a game element constraining players’ time. For example, the task in the games are often needed to be complete in the limited time, otherwise, players lose. The same approach can be applied to the gamified product. Users may be offered to do something which is available only today. The constraints make people react faster and somehow motivate them to take an action right here and now.

 

night in berlin tubik design case study

Night in Berlin App

 

These are some common examples of game elements in design but there is a room for the innovative game mechanics that can be applied in UX design. The major point to consider is that the product shouldn’t become too playful if it’s not expected according to general stylistic strategy and brand image.

 

The role of gamification in UX design

 

Today the method of gamification is widely used in design since it is thought to help to solve many problems in UX. The appropriate use of gamification and well-chosen game mechanics can become a valuable tool for UX designers on the way to increasing user engagement of the product as well as conversion rates. So how does it work? First of all, the gamification brings the element of fun to the websites and applications. People enjoy the interactive process full of fun, challenges, and competitive spirit similar to video games, so they are encouraged to go back. Furthermore, the game mechanics are the powerful motivators for the users. The game elements set the tasks and the awards are promised to those who accomplish them. The curiosity and excitement drive people to continue performing various the tasks and spend more time on the app or the website.

 

In addition, today gamification already goes as one of the major design approaches. Plenty of designers have caught the hype and actively apply this method in various projects. That’s why many users might already have an experience of interacting with the gamified products which mean they expect the same from yours.

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

Summing it up, gamification is quite a new technique which is now on the path of active proving its reliability as an effective design method. Nevertheless, its popularity is growing really fast so it has good chances to become the leading approach in a short time.

 

Recommended reading

 

Here are some more articles we could recommend for those who would like to get deeper into the topic:

 

Gamification And UX: Where Users Win Or Lose

Gamification: Designing for Motivation

5 examples of great gamification

Introducing Game Mechanics for Gamification


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