What Are Breadcrumbs

Breadcrumbs are navigation elements used mostly in web design and supporting users in a journey around the website. Due to breadcrumbs, users get aware of where they are on the website and can get used to the website structure easier, which means that breadcrumbs present a tool for better wayfinding. Yet, breadcrumbs don’t replace the primary navigation menu; they present the secondary level of navigation and increase website usability in case it has lots of pages.

Breadcrumbs on the product page on Amazon

Why such a funny name is used for this interactive element? If you think it resembles something from a fairytale rather than from design terminology, you are right. The term echoes Grimm Brothers’ tale about Hansel and Gretel: in it, the characters used breadcrumbs to mark the way home and not get lost. On the web, it works the same way: breadcrumbs visualize the path or the users’ journey from the perspective of the website hierarchy. That’s why they are also called a breadcrumb trail.

Types of Breadcrumbs

As for classification, there are three basic types of breadcrumbs:

Location-based: they show the visitors where they are according to a website hierarchy, usually applied to websites with complex navigation schemes consisting of multiple levels.

Image source

Attribute-based: they show the visitors the trail of attributes of the page they are on.

Image source

Path-based: these show the visitors the trail of steps they took to arrive on the page they are on. This type is often referred to as less effective compared to previous ones and is not recommended to apply.

Why Use Breadcrumbs

Among the benefits of breadcrumbs as a navigation element, we would mention the following.

• increased findability: the more complex is the website architecture, the more content it has, the better organized it should be to be found quickly. Breadcrumbs give users another touchpoint to the content and help to understand the structure of the website easier
• fewer clicks needed: with breadcrumbs, website visitors can jump from one level of the hierarchy to any previous step with no effort and no need to take all the way back, which means it takes fewer clicks and transitions to reach the page they want
• effective use of screen space: crafted well, breadcrumbs take a narrow horizontal line with plain-looking text elements that don’t need much space, so users get navigated but designers have no need to overload the page
• no misinterpretation: breadcrumbs present the element which is hardly ever misunderstood by users: the behavior pattern for them has solidified through years and people rarely mistake this element for anything else
• lower bounce rate: breadcrumbs are great support for first-time visitors or people that have no everyday experience of dealing with complex websites, so the more confident they feel the slimmer are the chances of them bouncing the page. What’s more, it’s an effective way of engagement for the users directed to a particular landing page: seeing it as a part of the bigger structure shown via breadcrumbs, users can get interested in jumping to other pages and seeing more.

Minimalist product page by tubik for an e-commerce website uses breadcrumbs to follow the typical mental model users expect and help them with quick navigation.

Design Practices for Breadcrumbs

Here’s a bunch of UX design tips and practices that can help to master breadcrumbs as a supportive and handy element of web navigation. Bear in mind that none of these practices is a cure-all to apply for any website: the examples below show you how different products approach this navigation element to cover their priorities.

Don’t use breadcrumbs as the primary navigation

The key rule of thumb for breadcrumbs is using them as an addition to major navigation. They shouldn’t be seen and used as a replacement for global navigation, usually found in the website header or menu. Instead, they support and amplify primary navigation.

Place breadcrumbs above the H1 heading

The most common place where users expect to find breadcrumbs and where they work effectively as a part of the general layout is above the H1 heading. It may be the name of the category, the product, the article’s title, etc. Sure, not all the pages have visually defined H1 headings; in this case, designers find the most appropriate place, typically in the top part of the layout.

For instance, on the George website, the product page features the classic approach to the breadcrumbs: they are placed right above the H1 heading, with a slight line used as a visual divider between them. However, on the category page, which doesn’t have an obvious H1 title, the breadcrumbs just keep at the same position at the layout, below the top navigation, and visual dividers help to clearly separate the trail from other navigation elements and filters.

Consider starting a breadcrumb trail with a link to the home page

Noticeable and easy-to-reach link to the home page that allows the user to jump to the website’s main page from any point of the journey is still an essential part of web navigation. Although more and more users are getting used to the pattern when the logo featured in the website header is clickable and helps to jump to the home page, there are still many those for whom this flow is not obvious. As the breadcrumbs let users quickly define the website hierarchy and their current position in it, it’s logical to start the trail from the main page of the website.

However, if there is a text link to the home page in the primary navigation, for instance, in the header, you don’t need to double it in the breadcrumbs.

As well, in the case of a polyhierarchical website, you may want to concentrate users’ attention on a particular level or category instead of sending them to the home page. For example, Uniqlo starts the trail from the name of the major category user is browsing at the moment, letting the logo in the top left corner do the job of moving visitors to the home page.

Make the current location look non-clickable (or don’t show it)

There are two different approaches to the last item of the breadcrumb trail: you may show the name of the current page or finish it with the previous step, which means that the current page’s name isn’t shown at all. Whatever your choice, make sure that all the elements cover a particular goal and help users. If you suppose that adding the current location to the breadcrumbs is necessary to support usability, make it clear that it’s not clickable and thus looks different from the interactive elements. For the mobile experience, it’s better not to show the current location at all, as the screen space is very limited.

On the contrary, for all the other elements of the breadcrumb trail, make it obvious that they look clickable and are clickable.

Example of a breadcrumb trail on the Walmart website

Clearly separate the elements

One of the most popular separating symbols for the elements of the breadcrumb trails is the symbol “greater than” (>), which typically defines hierarchy and features the movement from the parent category to the child category. Other frequently used symbols are slash (/), right-angle quotation mark (»), and arrow to the right (→). So, designers do have what to choose from, don’t they? Some also separate breadcrumbs with the color putting them into the colored tabs that imitate the line of elements, each colored in a different shade.

Mind readability and white space

As well as for any text element, the primary goal of breadcrumbs is to make the information packed in written form perceived and absorbed easily and in no time. So, take care of making them highly readable rather than decorative. And make sure there is enough space between the elements so that it is easy to read them, visually separate the pieces of text, and click.

A clear and unobtrusive breadcrumb trail on the Google Support website

Show the website hierarchy instead of the interaction history

Unlike the fairytale characters who used breadcrumbs to mark all their way, web designers would do much more effectively turning to show users the clear hierarchy of the pages instead of all the way they got through to reach this page. Such an approach will always look more logical and, furthermore, will clarify the clear and simple path back for the visitor who could get lost otherwise. What’s more, in this case, breadcrumbs don’t work at all for users who landed on a particular page and didn’t take any steps yet.

As Jacob Nielsen mentioned in his article, “a history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confusing progression at the top of the current page doesn’t offer much help.”

Don’t clutter the page with too many elements

What if the breadcrumb trail gets too long? Sure, it won’t be good to overload the page, especially at the secondary navigation level. In the case of the too long breadcrumb trail, some of them in the middle can be hidden behind the ellipsis. But never hide the first and the last element so as not to break the logic.

In his article about breadcrumbs, Alex Zlatkus recommends not to let breadcrumbs take more than half of the page and think about such a shortening with an ellipsis inside when the trails get more than 5 items.

Image source

Sure, the final decision is up to the designers of the particular project. It should be based on usability testing, as there can be different creative design solutions that allow for organizing longer breadcrumb trails effectively.

Don’t emphasize breadcrumbs visually in the webpage layout

If you feel the urge to find a super bright and catchy solution for the breadcrumbs, consider refocusing that on the other object of the web page layout. Breadcrumbs are not the primer violin in this show; that’s not the goal behind them, so keep them stylish but moderate. No need for bright accents, bigger sizes, and impressive fonts – breadcrumbs should just provide the secondary level of wayfinding, not scream into users’ faces distracting them from more important things that solve users’ problems.

For example, the OldNavy website uses super minimalist and non-distractive breadcrumbs placed in the top left corner right below the header with primary navigation, this way sticking to a common left-to-right reading and scanning pattern. That makes breadcrumbs almost unnoticed when you don’t need them but easily found when needed.

Don’t use multiple lines of breadcrumbs on mobile

The most precious asset of any mobile app screen is space. So, optimizing your website for mobile, take special care about that aspect: if the breadcrumbs trail is just copied from the website to mobile, it may take several lines, and this way snips off the big part of the limited screen space. So, by that, you get into the higher risk that some critical elements, for example, the name of the product on the product page or the introductory text, won’t be seen at once just due to the lack of space.

Don’t apply breadcrumbs to the websites with a flat or simple hierarchy

As well as with internal website search, breadcrumbs are needed and helpful in cases when the website has multiple pages and a complex hierarchy consisting of multiple layers. Breadcrumbs are common – and expected by users – in big e-commerce websites and platforms, media and news websites, blogs, and magazines covering a wide range of topics, etc. If that’s not your case and your website has a simple hierarchy, primary navigation will be enough to let the users effectively interact with it.

Example of a breadcrumb trail on the California State University website

Breadcrumbs present the perfect example of how much details matter in user experience design for the web. Being far from primary and critical functionality but approached thoughtfully and crafted well, this interaction element can contribute much to making interactions easier and user-centered. Nevertheless, think twice and test twice before deciding upon them, as there may be more effective secondary navigation options to solve a particular task for a certain project.

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of web usability and user experience design.

5 Basic Types of Images for Web Content

The Anatomy of a Web Page: 14 Basic Elements

UX Design: How to Make Web Interface Scannable

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Directional Cues in User Interfaces

Negative Space in Design: Tips and Best Practices

Error Screens and Messages: UX Design Practices

From Zero to Hero: Look at Hero Images in Web Design

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

Сообщение Web Design Usability: How To Use Breadcrumbs появились сначала на Design4Users.

What Is Interface Error

Interface error is the state or condition when the app cannot do what the user wants. It usually happens in three typical cases:

• the app fails to do what’s requested (literally, like there is no such technical possibility or function)
• the app cannot understand the input from the user (or the input is invalid)
• the user tries to combine operations that cannot work together (that usually happens because the user isn’t aware of the processes inside the app)

Sure, errors present a kind of annoying or even frustrating part of the user experience. Yet, there is no way to avoid them, so designers, developers, and UX writers have to think about ways to make that kind of interaction more user-friendly and smooth. Why is that important? Because, as well as in real life, virtual mistakes make a significant psychological impact and form a negative emotional background. For example, the research measuring the psychological stress caused by smartphone interactions showed a direct connection between appearing error messages and the level of cortisol, a known biomarker of stress. It can increase anxiety feeling and provoke a user to stop trying to interact with the product before they even start analyzing what’s the reason. So, let’s see what to do with those situations.

This is what the error of filling out the subscription form on Tubik Blog website looks

Best UX Practices for Errors

Errors are like fights: the best one is the one that never happened. There are different strategies for error prevention, like tooltips, prompts, tutorials, directional cues, suggestions, highlights, limitations, and the like. Yet, what should you do with users that already experience the error? Let’s cover some points that are effective in designing errors that wouldn’t make the user instantly turn their back to your app.

Make the error instantly noticeable

It may seem obvious, but don’t get tricked by it: what seems obvious has to be thought about twice. The worst thing that may happen about the error is when the user is totally uninformed about what’s going on and gets lost in the process. Be always honest with the user, and don’t try to mask the error. Even if the interface is super minimalist and any alien inclusion hurts your perfectionist designer’s eye and soul. Beauty doesn’t matter if it doesn’t work.

For example, if the user is filling the form made of 10 different fields, don’t just inform them that the form is not filled correctly, don’t make them search from one field to another where they made a mistake, and don’t hope they will do it. Make the field with a mistake super visible and save users’ energy and time.

Use well-recognized visual markers

Knowing mental models and well-known patterns of user behavior, user experience designers can reduce the cognitive load. That’s particularly essential in error situations that are quite unpleasant by default. Error screens and messages may not be the best place for experiments, so consider markers that are quickly recognized by most users. The red color and exclamation marks are still among the most popular ways to attract users’ attention to errors. Yet, be careful using the color as the only way to mark the error: check if it works for color-blind users. Also, mind the high level of readability on different devices.

Here’s how the registration error is marked on ArtStation: the system marks the field with color and explains the issue with a text prompt.

Explain what happened

Whatever the reason for the error, you may feel the urge not to explain anything, just to proceed with solving the issue. And that’s a mistake. Firstly, you risk getting a user back in this error situation again and again as they don’t understand what is wrong with their actions or app response. Secondly, we’ve already mentioned that errors literally provoke a psychological state of anxiety, and you may not predict if this error becomes a part of the wrong interaction pattern. So, be sure to find a way to quickly explain the nature of the error and keep users informed. For instance, instead of just informing (“You cannot log in to the app”), make the message explanatory like (“The username or password do not match”).

Don’t add more actions than needed

Another thing you may feel like doing is putting all the errors on separate pages or pop-up windows to make them as catchy as possible. Don’t overplay with it: in most cases, it’s enough just to make a color contrast marker in the interactive zone instead of popping up the additional modal window with the message requiring another unnecessary click to get the user back to the same page. Imagine that you are filling in the registration form and get that kind of pop-up for errors; no doubt, you will hate it very fast. Don’t make your users experience that: aim at providing inline validation and keep the message close to the field in error.

Yet, a pop-up window will be helpful if the user needs to be redirected to another page because of the error. So, for each case, take into account all pros and cons and target your solutions well.

This is how the error is marked on the Tubik website when the user tries to complete sending the contact form without adding an email.

Write simply

It’s crucial to make the error message as simple and clear as possible. Clear for the target user, not for the designers or developers creating that product. Avoid special terminology and jargon which you may use with QA engineers, for example (Like “Error 4.7 occurred” or “syntax error happened”). Don’t use long, complex sentences. Don’t make long and ornate introductions; it’s not the best place for them. Go quick to the point and make it decent.

Don’t blame a user

There’s an easy way to make a bad situation even worse: just tell the users that they are not clever enough to interact with this app, and that is why the errors happen. Offensive, isn’t it? Whatever form you wrap this message in, it will hurt the user who is already worried about things going not the way they wanted. So, don’t blame a user, be polite, friendly, and helpful; that’s important for setting the right emotional background of the situation. Try using clear instructions instead of blaming: for example, say, “Enter the valid email address” instead of “You’ve entered the invalid email address.”

Be constructive

Informing the user about the error in the right way is not enough: whatever friendly information you got lost, it isn’t super worthy if you don’t know what to do next. So, be quick to let the user know how to solve the issue. Some of the popular practices are the following:

• If that’s a web interface, give the options to move to other pages of the website, first of all, the home page
• In the mobile interface, make it easy to take a step back or quickly connect to the spot of the error
• In case of complex forms and processes, do it for each step instead of at the end of all the processes

This 404 page of the fashion brand’s e-commerce website gives the visitor various options to jump to, marking the ability to get back to the home page as the main call-to-action

Consider using images and icons

It’s not a secret that people perceive and decode images faster than words. So, thoughtful use of an icon or image on the error screen can make communication faster, saving the users’ energy and a good mood. What’s more, images have a big potential for emotional appeal, which can reduce the tension of dealing with an error.

404 error page for the ShipDaddy website uses funny mascot animation integrating brand graphics into the web interactions and making the error page smoothened with fun.

Test and analyze

Don’t have an illusion that work on error presentation is finished with the UI/UX design stage of the project. It never stops because feedback from real users is the best way to improve user flow. A/B test different options, analyze carefully what are the most vulnerable zones and interactions, and use the findings to prevent errors where possible and smoothen the process where mistakes are unavoidable.

Add fun if that’s appropriate

The page or screen of error messages can use gamification, interactive content, or other ways to add fun, and this way reduces the negative effect. One of the good examples is the 404 page on Dribbble: as its target audience is designers, the resource uses their natural creative curiosity to add fun to the error situation, so users can see the collection of popular designs organized along with a similar color palette. On the page, users can continue the game and try other colors or search for what they need using the search field integrated into the error page.

Well-Done Errors Checklist

So, to sum up, well-crafted errors would rather stick to the following points:

• readable and clear
• easily noticed
• constructive
• effort-saving
• polite and friendly
• reasonably emotional

Useful Articles

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

How To Use Visual Dividers in User Interfaces

How To Make Text Improve User Experience: Insights Into UX Writing

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

Big Little Details: 7 Helpful Elements of Web Usability

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

Meaningful Error: 404 Page Design. Inspiration for Page Not Found

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

Сообщение UX Design Practices for Error Screens and Messages появились сначала на Design4Users.

As in most cases, you have only several seconds to convince users to interact with your product; making it clear while the core pieces of content and interactive zones instantly visible may be crucial for decision-making.

The web page for the furniture company website uses an arrow with the text prompt to let visitors know about more content down the page.

How Directional Cues Influence User Experience?

Directional cues:

• enhance the page or screen scannability
• strengthen the visual hierarchy
• improve navigation
• increase conversion rates.

Perhaps, one of the most well-known practical experiments showing the power of directional cues and the effectiveness of their types was accomplished by CXL Insitute. They created several versions of the same landing page that only differed with directional cues, and then collected data on user interactions and analyzed it. Here’s how the options looked:

The experiment showed that the directional cues had a great impact on user experience, content consumption, and conversion rate:

• the page with a hand-drawn arrow got the longest time on page and the attention directed to the contact form

• the version of a page with a man looking away from the form got the least attention and interaction from users.

So, wisely applying directional cues, the UX designer enhances the visual communication of the interface with the user. Clarifying the way, we make it easier to achieve the destination, which is a factor influencing usability.

Popular Types of Directional Cues

Arrows

One of the most popular direction cues comes directly from the physical world. Perhaps, there is no more obvious and universal way to show the direction than with an arrow. That is the reason why a variety of arrows turn up here and there in interfaces to help the user not get lost. It is the pattern of interaction that is clear for people of any age, culture, level of education and tech literacy – and the experiment described above proves it well.

The website about nature expeditions uses an arrow down the hero section of the home page to engage users to scroll and see more than the above-the-fold part

Pet shop website uses the round animated text hint with an arrow inside to show users that by scrolling down they can learn more about the product

The website on forest camping uses arrows prompting interactions with horizontal slides.

Home decor ecommerce website uses arrows as the visual prompts on interactive elements.

The webpage for the hot-dog delivery service that allows for creating custom hot dogs uses arrows to let users see the stage they are at.

The animated arrow in the bottom area of the website for travelers invites users to scroll to see more.

The page for the Momatu website concept uses a curvy arrow to connect the tagline with the list of benefits uncovering its sense.

Pointers

What if you don’t want to make the design look that direct and straightforward as arrows do? Then pointers can help. Again, it works as effectively as in real life: when someone wants to direct your attention to an object or person, it’s enough just to point at it. On the web pages and mobile screens, this trick works the same way, giving the reason for various visuals giving an elegant visual hint on the core information or interactive element.

The home page for uMake website features a catchy animated hero illustration in which hands play the role of pointers drawing visitors’ attention to the CTA button.

This landing page of the platform for hiring artists uses the hero illustration that not only transfers the idea and makes the page attractive. It also works as a pointer: the composition of characters points at the zone with information and CTA.

It may not look like a direct pointer, but if you look attentively, you’ll see that all the dynamic composition of the page leads you to the zone of the call-to-action button, even the details such as the paper plane.

The hero illustration on the website of the luggage delivery service also uses the power of pointers: not only people but even the plane direct your eyes to the CTA button.

Hero illustration on the landing page of a productivity service also uses the composition and a character posture to make it a directional cue focusing users’ attention on the tagline.

Eye Line (Gaze Direction)

Eye direction is another powerful directional cue built on natural human reactions. When people see that someone’s eye is focused on some point or object, they have a natural urge of curiosity to check what it is. That is why this trick is often used with visual content like photos or illustrations integrated into UI layout.

The hero image of the cosmetics e-commerce website features a photo of two women, one of whom is looking directly at the visitor, setting emotional contact, while the other is looking down and here gaze direction naturally draws the visitor’s eyes to the tagline presenting the major benefits of the brand.

The hair beauty company website uses a hero image on the home page that works as a directional cue: the model’s eyes attract your attention to the zone of CTA elements.

The landing page for a dating app uses the illustration with a character whose eye line is directed at the information copy block.

The ecommerce website selling exclusive hair accessories uses a sophisticated hero illustration that also plays the role of a directional cue as the eyes of a character are directed to the tagline.

The hero section of the e-commerce website uses the image not only to demonstrate the product but also to work as a directional cue focused on a tagline.

Visual Prompts

Not only arrows can give users a hint that interaction is possible. Other objects can provide some help, like icons or illustrations symbolizing the type of interaction. The mouse may mean that you can scroll, the hand animation will let you know that it’s possible to swipe, and so on. This way, the users don’t need to make additional effort to understand how the interface works.

The website for a design studio uses the icon of the computer mouse as a visual prompt to try scrolling down.

The home page for the FarmSense website uses the text prompt Scroll to inform users that they can see more content on the page.

Part of the Following Content

One of the issues that may arise in the interaction process is the illusion of completeness. It happens when the layout seems to be complete, and it’s not clear that by scrolling, you can open more content. So, showing the part of the content that will continue below the area visible on the screen works as a non-obvious but effective directional cue. This way, users avoid the feeling that they have seen everything, and the risk of missing important content gets lower.

The list of tracks in the music learning app shows the part of the last tab at the bottom of the screen to give a hint that the list is not over and can be scrolled for more.

The fashion model portfolio webpage features parts of the photos in the bottom area to give users a hint about scrolling to see more.

The home page of the food delivery service shows the part of the menu in the bottom part of the screen to show that there is more content in the below-the-fold area. Also, the layout uses arrows as a directional cue showing that horizontal interaction will open another information block.

So, it’s easy to see how differently directional cues may look. Whatever kind of dress and performance is chosen for them, the main thing is that they present another sign of respect for the users saving their precious time and effort and making interactions natural and easy.

Useful Articles

Welcome to check more articles devoted to the issues of user experience design for web and mobile.

Basic Types of Buttons in Web and Mobile User Interfaces

How To Make Text Improve User Experience: Insights Into UX Writing

5 Basic Types of Images for Web Design

Negative Space in Design: What It Is and How To Use It

How to Make User Interface Readable: Tips and Practices

Hero Images in Web Design: When, Why, and How to Use

The Anatomy of a Web Page: 14 Basic Elements

Take My Money: UX Practices on Product Page Design

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

Сообщение UX Details: Directional Cues in User Interface Design появились сначала на Design4Users.

Regardless of whether you’re new to photography or you already know a lot, there is always room for learning and improvement. Here are some nifty tips on making your photos look more professional, even if you’re using a low-budget camera or a mobile phone.

Learn Basic Photography Rules

There’s a lot of you can learn about composition, layout, and lighting even in a short photography course. It might seem boring if you just want to get out there and enjoy taking photos, but trust us, it’s worth it in the long run.

Mind the so-called rule of thirds as you’re shooting your photos: before you take the picture, imagine a grid with 9 equal squares. The point of this rule is to give your viewer a natural flow of the elements in the photo. The squares are formed by two equally spaced horizontal lines and two equally-spaced vertical lines, and key elements of the composition are recommended to be placed along these lines or their intersections.

There are also other common rules in photography, such as the horizon line, which should always be placed above or below the exact center of the photograph. Take some time and dive into the details, because photography really is a science! You don’t have to blindly follow its rules, but they are great guidelines to create professional photos.

Focus the Main Object

Before you click the shutter button, ensure the photo is focused. In other words, visually emphasize the central object in the photo.

Image source: Burwell School of Photography

The good news is that most mobile phones that have this option only require a touch of the central object and the focusing is done instantly. Other devices that have the autofocus option will recognize the primary object automatically, and you won’t even have to tap on it. In the settings, you will be able to determine the amount of blur and central object sharpness you want.

Samsung’s, iPhone’s, Huawei’s, and all other new generations of phone cameras are now paying particular attention to auto-focus and other photo focus options. It’s a trick that’s quite easy to set up, but it’s incredibly effective. Simply tapping an area on your phone can make your photo look much more professional.

Mind the Exposure

Exposure is another essential element of photography that can have a significant impact on how professional your photos turn out. Exposure signifies how much a photograph is exposed to light (be it natural or artificial).

Using modern editing tools and Photoshop, you can play around with exposure after you’ve already taken the photo, but your best bet is to nail it as close to perfect on the original. If the exposure works great, editing will be a piece of cake.

Try HDR

HDR in photography stands for High Dynamic Range. This photo option has a goal of reproducing all the details and visual inputs in the scene, even those you can’t see with the naked eye.

Image source: Digital Photography School

HDR implies everything from colors, details, shadows, contrasts, and all those tiny things you might not be aware of. Even though they are aspects that you don’t notice, enhancing them can boost the atmosphere and enrich the photograph.

The HDR system works by creating several different photographs in one session, but with different settings. In the final step, it connects all the versions into a single photo, thus integrating all the aspects of the scene that’s before you. HDR is getting more and more popular both among amateurs and professional photographers. Regardless of your level of experience, HDR will surely improve your satisfaction with the final photographs.

Explore Online Services and Tools

You can save time by using online services and tools that can automate some of the footwork, help you track your progress, or teach you more about the rules of photography.

If you’re just a beginner, it would be a good idea to start a photography blog where you will showcase your favorite pieces. This will have multiple benefits:

• you’ll have the motivation to take photos regularly
• you will be able to get feedback from members of the photography community
• through sharing the knowledge with others, you will deepen your own

Try the Google Lens

While we’re on the topic of online tools, services, and apps, it’s definitely worth it to mention the Google Lens app, which can help even complete amateurs create professional-looking photos.

Back in 2015, Google came out with an improved photo-taking app intended for their Nexus devices (now, all devices use it). It introduced huge improvements in mobile phone photography. There’s the Photo Sphere, which enabled users to take a fish-eye, wide-angle, or panoramic photo. Lens Blur was also introduced as a new shutter mode, which really raised amateur photography to the next level.

Editing Is King

There’s not enough that can be said to explain the importance of editing once the initial material is captured. Many people don’t know this, but professional photographers spend hours, days, weeks, and even months trying to tweak their photos to perfection.

Also, laymen usually consider editing to be much easier than it actually is. Just pop it over to Instagram filters or Photoshop and voila – you got yourself a professional photo? Absolutely not. Learning how to edit photographs is a valuable skill that takes time and effort to master.

Editing is like “the other side” of photography work. It’s completely different from the moment where you’re looking for the perfect shot. While you’re shooting, you’re looking for inspiration, unique shots and perspectives, breathtaking views… While you’re editing, you’re looking for flaws and possible improvements. In other words, you take photos like an artist, but you edit like a scientist.

Conclusion

As a photographer, whether you’re an amateur, enthusiast, or a pro, you probably know there are diverse factors that go into creating a perfect photo. Luckily, using the tools and services that are easily available nowadays, you can achieve that without using too much time or resources. Open up to new professional opportunities by using some of the tips we have mentioned above to make your photos look more professional!

About the author: this is a guest article by Donald Fomby, a self-taught content writer who’s using his degrees in computer science and digital marketing to write about content marketing, web design, UX, and SEO. Currently, he’s also a writer at Supreme Dissertations and TrustMyPaper. Donald focuses on sharing useful knowledge for small and medium-sized businesses on how to manage their web presence and content marketing strategies.

You may also like the inspiring collections of food photography and packaging designs.

Сообщение 7 Basic Tips to Make Your Photos Look Professional появились сначала на Design4Users.

What’s information architecture?

Information architecture (IA) is a science of organizing and structuring the 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’s 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 a fundamental study in many spheres including design and software development.

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 a high-quality product since it reduces the possibility of usability and navigation problems. This way, well-thought information architecture can save both the time and money of the company which otherwise they would have spent on fixing and improving.

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 that can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan the navigation system.

UX design means much more than content structuring. In the first place, UX designers aim at making a 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 a powerful user experience.

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 a 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.

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 retail websites or apps, where people have to go from one task to another to make the purchase.

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 that is ordered according to date, or some may prefer navigation along the topic.

MoneyWise App

In addition, content can be grouped according to the organization schemes. They are meant to categorize the content of 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 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

Labeling systems

This system involves the ways of data representation. The design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create labels that represent loads of data in a few words. For example, when the designers give the 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

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 the content. It’s a complex system that 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.

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 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

Originally written for Tubik Blog

Сообщение Basics of Information Architecture for Designers появились сначала на Design4Users.

The role of psychology in design

Today the tendency of user-centered design makes designers reconsider the approach to their work and go deeper into the understanding of the target audience. Donald A. Norman in his book “The Design of Everyday Things” defines design as an act of communication, which means having a deep understanding of the person with whom the designer is communicating. In order to get a better insight into people’s needs, designers are recommended to bear in mind the psychological principles of human behavior, aspirations, and motivations.

The outcome of the work can be even more positive if a designer applies psychology in the creative process since science gives a close understanding of the target audience. Psychology knowledge helps to create the design which will make users perform the actions they are expected to such as making a purchase or contacting the team.

Designers may see psychology as a complicated approach to improving the design and for that reason neglect this part of research and analysis. However, you don’t need to be a Ph.D. in psychology to use it at your work effectively. All you need to consider are the basic principles constantly presented in design. Based on our experience and the conducted research, we’ve defined six effective psychological principles often applied in the design process.

Gestalt Principles

This psychological theory is almost 100-year-old but it hasn’t lost its actuality. The word “gestalt” means “unified whole” so the theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups. The principles, on which users form the groups, include:

Similarity. If a user sees objects that look somehow similar, they may automatically perceive them as the individual elements of one group. The similarity between elements is usually defined with shape, color, size, texture, or value. The similarity gives users a sense of coherence between the design elements.

Continuation. It is the principle according to which the human eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line.

Closure. It is a technique based on the human eye’s tendency to see closed shapes. Closure works where an object is incomplete but the user perceives it as a full shape by filling in the missing parts.

Proximity. When objects are placed in close proximity, the eye perceives them as a group rather than seen individually even if they aren’t similar.

Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that show two faces depending on where your eye is focused on the object or background.

Photography Workshops  website

The Gestalt principles confirm in practice that our brain tends to make tricks with us, so designers should consider that fact during the creation process to exclude the possibility of misunderstandings.

Visceral Reactions

Have you ever had that feeling when you fall in love with the website after the first second when you’ve opened it? Or maybe an application has made you sick only with the quick glance at it? If yes, then you’ve already known what’s a visceral reaction. This kind of reaction comes from the part of our head called “old brain” responsible for the instincts and it reacts much faster than our consciousness does. Visceral reactions are rooted in our DNA, so they can be easily predicted.

How do designers use this knowledge? They aim at creating a positive aesthetic impression with the design. It’s not that difficult to guess what looks nice to people and what doesn’t if you know your target audience and their needs. So, the tendency of using the high-resolution beautiful photos or the colorful pictures at landing pages, websites, or any other web and mobile products is not accidental.

Jewelry E-commerce Application

Psychology of Colors

A science studying the influence of colors on the human’s mind, behavior, and reactions is called the psychology of colors. Today we won’t go deep into the aspects of this study since it is complex so deserves to have a specialized post devoted to it (on which, besides, we’re already working). In a few words, the main idea of the study is that the colors have a great impact on the users’ perception. That’s why designers should choose the colors knowingly to make sure their work presents the right message and tune.

Here is the list of the basic colors and the meanings which they are typically associated with:
Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.
Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.
Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.
Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.
Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.
White. The color means purity and innocence, as well as wholeness and clarity.

Slopes Website

Recognition Patterns

You may have noticed that websites or applications united with one theme usually have common patterns in their design. The reason is the users’ psychology. The thing is that people visiting a website or using an application are expecting to see certain things associated with the definite kind of product.

For example, visiting a website of a barbershop, the users are not expecting to see bright colors or pictures with cats or anything like this because if they do see it, this will definitely make them think of a website as an untrustworthy resource.

However, not only the colors and pictures matter. Some obvious and common things such as a list of blog posts on the front page of a blog or the filters on the e-commerce website are also important for successful navigation. Users become accustomed to things quickly and their absence makes them feel uncomfortable.

To-do list concept

Scanning Patterns

In our article Tips on Applying Copy Content in User Interfaces, we’ve already mentioned that before reading a web page, people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads along the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the initial sentences of the paragraphs. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc.

Z-pattern is applied to pages that are not so heavily concentrated on the copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

Knowing these patterns, designers can place the elements in an effective way for users’ perception and help them perform expected actions.

Hick’s Law

The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of the interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave.

That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective.

Cafe Coupon App

Psychology is an effective tool in design which makes the creative process more productive while the result is going to be more user-centered. We’ve told you about six useful principles but they are only the tip of the iceberg because there is much more to learn on the topic. Don’t miss our next blog posts continuing this useful theme!

Recommended reading:

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

• Gestalt principles
• The role of psychology as a design tool
• 5 psychology rules every UX designer must know
• Gestalt Theory for Efficient UX: Principle of Similarity.
• Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman
• The 5 pillars of visual hierarchy in Web design
• 6 principles of visual hierarchy for designers
• On Visual Hierarchy
• F-Shaped Pattern For Reading Web Content

Originally written for Tubik Blog

Сообщение Psychology in Design: How to Understand Users появились сначала на Design4Users.

In the issue of UI/UX glossary devoted to the web design terms, we have already provided a 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 the design perspective, the header is also the area making the broad field for creative design solutions that 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.

Comics Shop Home Page

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 the 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.

Bjorn Website

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.

Event Agency Webpage

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 that 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.

Guttenberg Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy. As 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.

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.

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 the 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 the 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.

Daily Bugle Online Magazine

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.

The Big Landscape

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 a 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 that is quite popular in the 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 a typical bread-meat-bread hamburger.

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 a 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.

Ice Website

The presented web design concept shows the version of the 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 the 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 the visual performance of the headline and call-to-action element of the page; the right zone features icons of social networks and a 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.

Slopes Website

This design concept presents the website with an original structure of the page, leaving the wide light margin on 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 an 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, the hamburger menu allows the designer to organize numerous theme blocks of information and provide an 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 the 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 the 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.

Architecture blog

The presented design concept of a website has a fixed header that 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.

Photography workshops website

Here is one more design concept featuring a 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 processes 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 a trick in one of the recent case studies for a bakery website.

Vinny’s Bakery

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 an instant connection to the core interaction areas: product 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: the 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

Originally written for Tubik Blog

Сообщение Best Design Practices for Website Headers появились сначала на Design4Users.

When you work in a creative industry, time management seems to be something far and impossible to do. Loads of work, lack of inspiration never allow you to feel free in controlling your time. Nevertheless, our bosses and clients expect us to be highly productive, so we cannot afford delays and mistakes and have to use our time in the most effective way. Today our article presents some practical tips on time management for professionals in creative spheres.

Plan your day

Many of us coming at work may spend the whole morning surfing the social networks up till the lunchtime and then wonder where the morning hours have gone. The problem is that we rarely plan the day ahead so we don’t know which task, among hundreds needed to be done, to start with. The daily plan helps to organize the tasks and gives the review on how your day will come to pass. With the plan on hands, all you need to do for having a productive day is stick to the plan as close as you can.

It is useful to form your daily strategy in the evening before you sleep or in the morning before the workday begins. There are many ways to creating an effective daily plan. For example, you can write a to-do list in your datebook or take some notes on your smartphone. Moreover, today many apps make this process even easier.

Upper App

Prioritize the tasks

Creating your personal to-do list may become a problem when you have loads of tasks to accomplish. Of course, all the assignments given to us by our clients or bosses are urgent and all of them are usually marked as “to do as soon as possible” but we’re humans and it’s impossible for us to do lots of tasks at once. That’s why you need to think out the details and prioritize the important assignments. To set the priorities effectively, it can be good to answer to yourself objectively which project needs to be finished today and which can wait a bit more.

However, if you have a creative job, it’s not always possible to stick to your plan and accomplish the tasks in the right order. The artistic job heavily depends on inspiration and its absence can stop the whole process. In this case, creative people are recommended to have a fallback meaning the next project in the priorities. Switching to another kind of work can have a positive effect on your mind and creativity.

Eliminate distractions

If you’re a designer, a writer, or an illustrator, your job includes using the Internet, full-time or partly. Of course, the net is the major source of useful information, but on the other hand, it is also the spring of distractions such as social networks and entertaining websites. Interfering the creative process, you can’t concentrate completely on the task meaning you are not able to do the job properly. Certainly, it is hard to eliminate all the web distractions since we need to check our emails or contact the clients, still, we don’t need to be online for 24 hours. In most cases, you can choose a certain time for this part of daily routine like 10 a.m and 6 p.m. and that is enough to keep up with the things going on and stay in touch with the customers.

Track the time

It is said that happiness takes no account of time. Nevertheless, any project has its deadline and we have to fit it, so the count of time does matter here. To be more productive, it’s advisable to establish your own mini-deadlines for the tasks. For example, the task number one should be ready at 11.20 a.m, the next should be done at 13.00 p.m. Try to estimate the time needed for the specific assignment more objectively, do not overestimate yourself. Having a detailed schedule, you organize your time in the most efficient way and prevent your work from dragging on. Also, this helps your mind stay focused on what should be done right here and now.

Stop procrastinating

The majority of us constantly postpone our duties for a particular reason. However, sometimes it may turn into chronic procrastinating when we do anything but work. This can’t bring any good to either you or your clients, so something has to be done about it. Here are several pieces of advice on how to reduce the procrastination in the workflow.

Don’t push yourself. Negative emotions never help. While you’re biting yourself for the moments of procrastination, you are not able to start work. So, the first step to take is to calm down and understand that everyone is keen to procrastinate. There’s nothing wrong with you.

Find out the reason. Every time we postpone tasks there is a reason standing behind it. So, when you feel like procrastinating you need to ask yourself why you are doing it. Is the task too boring, or complicated, or unclear for you? Finding a reason, you’ll be able to find the solution.

Split big projects into small steps. Consistently, when we have a big project ahead, it may seem a heavy burden that cannot be accomplished anytime soon. That’s why, it is always a good idea to split the project into small, clear, and simple tasks. You can also talk this through with the client and set the mini-deadlines which will definitely improve your workflow.

Stay focused. Multi-tasking has become a part of the routine for many of us a long time ago, but only a few people learned how to deal with it effectively. We often switch from one task to another, and as a result, nothing is done properly. Try to stay focused on one task at the time, so you could perform it as well as you can. Shifting to the other activity is effective only in case you are totally stuck and have no idea where to move next.

Be good, not perfect

Someone may say that perfectionism never hurts but it’s not completely true. When you constantly work under deadlines, the desire to make everything perfect may play a joke with you. Trying to avoid the smallest mistakes at a certain stage of your work, you lose the time reserved for the next steps. And when the deadline comes, you realize that you have 80% of a perfect design, while the client expected the fully accomplished work. To avoid such a situation, try not to get obsessed with the smallest details that are not vital for the task. Remember that you can always polish everything later if you need.

Don’t forget to enjoy your life

Creative job demands creative energy, but the endless projects, meetings, brainstorming, and other work routines can make us tired no matter how much we love our job. It’s necessary to include time for relaxing into your schedule. An evening with your friends or in the gym can charge you with positive energy and inspire you to do something new and wonderful. So, don’t forget to find the opportunity of having a good time.

Using at least some of these tips, you can improve not only your workflow but everyday lifestyle too. Value your time and the others will do the same.

Recommended reading

Why Being A Perfectionist May Not Be So Perfect

19 Productivity and Time Management Apps for 2016

Deep Work: Rules for Focused Success in a Distracted World by Cal Newport

First Things First by Stephen R. Covey, A. Roger Merrill, and Rebecca R. Merrill

30 Time Management Tips For Work-Life Balance

Originally written for Tubik Blog

Сообщение Useful Tips on Time Management for Design Professionals появились сначала на Design4Users.

What is color psychology?

It’s a branch of psychology studying the influence of colors on human mood and behavior. The thing is that our mind reacts to colors while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. These days a lot of research is conducted in order to study the peculiarities of these reactions and there are already many theories useful to learn. Color psychology is helpful in many industries including business, marketing, and design.

The success of the product depends largely upon the colors chosen for the design. The properly selected colors help put users in the frame of mind that compels them to take action. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the basic knowledge of color psychology can be useful on the way of improved conversion for your product. Moreover, accurately chosen colors can advance the usability of the product.

Meaning of colors

To convey the right tone, message and call users to make the expected action, designers need to understand what colors mean and what reaction they evoke. In one of our previous articles, we’ve demonstrated you the list of colors with brief descriptions of their meanings. Today we have prepared a bit more expanded list of color meanings in common use and in design.

Red

The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad states of mind and soul including love, confidence, passion, and anger. In design, the use of red color is an effective way to draw users’ attention. Also, it’s recommended to use red sparingly to avoid negative reactions.

Toonie Alarm app tutorial

Orange

It is an energetic and warm color bringing the feelings of excitement. Orange combines red’s power and yellow’s friendliness, so it may bring feelings of motivation, enthusiasm, and love to life. Designers use the color if they need to give the spirit of creativity and adventure.

fOxygenic Logo

Yellow

This is the color of happiness which symbolizes the sunlight, joy, and warmth. Yellow is thought to be the easiest color to visibly see. What’s more, it has one of the most powerful psychological meanings. Users seeing yellow colors in the design can feel inspiration and confidence. Although, you need to remember that too much yellow may bring negative reactions such as the feeling of anxiety or fear.

StarDust website

Green

It’s often called the color of nature, balance, and harmony. Green brings calming and renewing feelings. Also, it is a sign of growth and inexperience. It has more positive energy than most other colors but sometimes it associates with materialism. Design in green colors perfectly suits the products connected with nature.

Big City Guide: Stockholm

Blue

It often represents some corporate images since blue is the color of trust. It usually shows reliability, may give users calming feelings. However, as a cool color, it also associates with distance and sadness, so designers need to keep it in balance.

Design for Business E-book

Purple

Long associated with royalty and wealth since many kings wore purple clothes, it’s useful for presenting some luxurious products. It’s also a color of mystery and magic. It mixes the energy of red and blue, so it has a balance of power and stability. A big concentration of the color may distract users’ mind.

Night in Berlin App

Pink

It is the color of hope, sensitivity, and romance. Pink is much softer than red, so it creates a sense of unconditional love. Pink is associated very strongly with youthful femininity, so it may be an effective color if the target audience is mostly girls and young women.

Dating App

Brown

The color of security and protection like the mother Earth. Designers commonly use brown as a background color in a variety of shades, from very light to deep. It brings the feeling of warmth and comfort to the designs. Also, it may be used to show experience and reassurance.

Jewelry E-Commerce App

Black

The color has a great number of meanings. It associates with tragic situations and death. It signifies a mystery. It can be traditional, modern, serious. Everything depends on how you employ it and which colors go with it. Black matches well with any other color, so it’s ideal for the background. Designers often use it to set contrasts.

Vinny’s Bakery

White

The color means purity and innocence, as well as wholeness and clarity. White often associates with a blank sheet of paper motivating people to generate new ideas. However, too much white can cause feelings of isolation and emptiness. In design, white is commonly used as the background color especially for the resources for which readability is a vital part.

Bjorn website

Color meanings in branding

Colors are a vital factor for not only the visual appearance of products but also brand recognition. Nevertheless, in branding, colors tend to have more direct meanings than in common understanding. They can be briefly described within a few words, so here is the list for you:

• Red. Confidence, youth, and power.
• Orange. Friendly, warm, and energetic.
• Yellow. Happiness, optimism, and warmth.
• Green. Peace, growth, and health.
• Blue. Trust, security, and stability.
• Purple. Luxurious, creative, and wise.
• Black. Reliable, sophisticated, and experienced.
• White. Simple, calm, and clean.

Realli logo animation

Color Preferences

Visual perception is quite individual for everyone. Designers need to remember that the color effects may be different because of the factors such as age, culture, and gender. First of all, people’s preferences can shift during life whatever the object is, let’s say, food, clothes, music, colors, and plenty of other aspects. It is caused by both mental and physical changes that happen to us across a lifetime. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Faber Birren explains it in his work Color Psychology and Color Therapy: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”. One more difference between children’s perception and adult is that kids can change their favorite colors fast, while adult color preference is usually non-malleable.

Also, designers need to consider that there are many cultural differences, and color perception is not an exception. Sometimes cultures define colors diversely, for example, in Western countries, white color means happiness and purity, while in some Asian countries it symbolizes death. You can find many examples of how different may the meanings be in countries but it would take a whole article to tell about it, so if you’re interested in the topic, follow our updates on the blog since the post on this issue is coming soon.

Another point on the color preferences is gender. Many color studies have been done over the years and a lot of them say that the color preferences of women and men significantly differ. The Color Assignment group has conducted deep research on this topic and many designers already use the results in the creative process. We’ve defined the most notable things from the research to share with you.

Blue is the top color. Both men and women of all ages think of blue as the favored color. The shades of blue such as cerulean, azure, beryl, cornflower blue, and sapphire are popular among women.

Brown and orange are in dislike. The first one considered less favorable among men, the second – among women.

Cool colors are preferred. Men and women favor blue, green, and their tints in general.

Women like tints. When men prefer pure or shaded colors, ladies are good with tints.

Men prefer achromatic colors. White, black and gray are neutral colors, and men are keen to choose them.

Favorite colors

Least favorite colors

Source of charts

It’s vital to consider the color preferences of the target audience while creating UI and UX design since it helps to avoid negative reactions and associations.

Points to consider

Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands. Summarizing the article, here is the list of useful things to consider:

• Choose colors wisely. They have a deep influence on users.
• Make sure your design and its colors convey the right message and tune.
• Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
• Some colors may look different on the screens of different devices. Additional testing never hurts.
• It may be a good idea to test the UI colors with representatives of the target audience.
• Try to make the color combinations wisely, in the best way for the users’ perception.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally written for Tubik Blog

Сообщение Color in Design: Influence on User Behavior появились сначала на Design4Users.

Tubik designer Tania Bashkatova loves traveling as much as design, so she often combines these passions to create sophisticated concepts devoted to travelings and nature. Today we present the case study on the design concept of the website for travelers called the Big City Guide.

Task

UI/UX design for onboarding landing page presenting a website about big cities all over the world.

Process

The Big City Guide (BCG) is one of the first works made in terms of Tubik UI Fridays which is the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls.

During one of these creative sessions, the task was given to design the landing page for the online resource providing information about big cities around the world. Typically for the design of landing pages, the designer decided to apply the expressive and informative potential of the background images. The objective set for the visual design was to convey the mood and the atmosphere via one photo for each city. The solution found for this aim was the animated widget with horizontal scrolling presenting three big cities in order to create an efficient visual perception of the information for the target readers. The three different capital cities were chosen to show how dissimilar styles can be united in one design.

The first page of the BCG concept presents Berlin. The city is filled with various sights so it was a difficult choice to make. The designer tested many pictures to find the one which would bring the right mood of the city. In the end, there were two variants.

Both pictures make an effective design but the second conveys the atmosphere of solid and futuristic Berlin better so the designer favored it. The name of the city becomes the center of the composition, bold and quickly readable in strong uppercase letters. The word sets the high perspective of the famous tower. The letters are arranged among the spires in the way which gives the feeling they always were there.

The second featured city is Madrid. It is often thought that the Spanish capital city fully consists of medieval buildings but that’s not exactly true. Today Madrid is one of the modern European business centers, so the designer decided to present the modern side of the city. Here is one of the examples made while searching for the best fitting picture.

Yet the priority has been given to the bridge in a contemporary style. Keeping the consistent scheme with the previous page, the center of the composition remains the name of the city. The word shows a deep perspective with the modern construction echoing the form of the swirl or vortex. The subheading presents the motivating line that gives the mood of the energetic and bright city. Here is the final result.

Every new day brings new knowledge. Searching for the perfect background photo the designer missed the fact that there is not only Madrid in Spain but also another one in Iowa, USA. The Internet played a joke with the designer mixing photos of two Madrids, so it’s impossible to distinguish them for those who haven’t visited all the corners of these places. Well, that’s good to take lessons from the errors, and this case gave us all the chance to learn something new.

The last city featured is Stockholm. It is full of magnificent ancient buildings and modern-styled places, so the designer experimented with various photos of the city places. Here is the example with the picture of the underground in Stockholm which presents the part of the creative search for the visual concept.

However, all the urban photos couldn’t convey the unique atmosphere of Stockholm. That’s why the designer comes from the other side. Stockholm is one of the biggest Scandinavian cities, so nothing can deliver the Nordic vibes better than its nature.

This is the final variant of the Stockholm page. The content elements on the page are placed similarly to the previous with the name of the city in the center. The word is harmonically inscribed into the thematic picture with deep and magnificent Nordic forest. The subheading presents the motivating line whose message naturally combines with the image and the associations set by the city.

The onboarding landing page applies simple structure recognizable for users. The left part of the header features a clickable logo BCG taking users to the home page. The header menu allows people to see the full list of cities, go to the blog or learn the maps. Also, the service provides the registration feature. The search icon completes the header.

The vital part of any city guide is the description copy. Since the pages are focused on the name of the city, short copy is placed at the left bottom part of the page. CTA button under the text provides users with an opportunity to read more if they are interested in detailed information. The users can also find social network links easily in the footer.

The final stage of work on the landing page was the animation of the presented layouts, accomplished by motion designer Kirill Erokhin.

The static variants of pages have different colors of the background, but in the final animated version, all pages are united with one color. Smooth animation adds the dynamic nature of traveling and supports the feeling of consistent interaction. Navigation through the pages can be accomplished in two ways: via the navigation button and with the help of a progress bar placed on the top of the page. They both use the same contrast color to keep the visual consistency and make all the ways of navigation clear.

As we can see, despite the fact that all cities differ by style and energy they bring, the designer managed to keep them in a single tone creating the feeling of the website unity. Moreover, such a construction of the landing page makes it flexible for further alterations, for example, adding more pages of the cities that are particularly popular with readers of the website.

Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile and web design, here is the set of them.

Home Budget App. UI for Finance

Health Care App. UI for Doctors

Toonie Alarm. Mobile App UI Design

Slumber. Mobile UI Design for Healthy Sleeping

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: Big City Guide. UI for Landing Page появились сначала на Design4Users.