show-the-way:-directional-cues-in-user-interfaces

What do you do if you want people to get to a particular destination? You do everything possible to show them the way. In user experience design, it should work the same way. Don’t expect that users come to your website or app ready to fiddle and learn the ropes. It’s designers’ job to make the way to the conversion as easy and intuitive as possible. Directional cues are among the key factors for reaching this goal. So, in today’s article let’s revise the popular types of directional cues in web and mobile user interfaces and find out why they are such an essential factor of positive user experience.

navigation in ui animation tubik

What Is Directional Cue?

Directional cue is any element of user interface that gives a visual hint on specific interaction or content to let the user see it faster and easier. As well as road signs and signposts do in the physical world. They guide a visitor or user to the key elements, text lines, and call-to-action elements, this way making the conversion reachable and users’ problem solved quicker.

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.

How Directional Cues Influence User Experience?

Directional cues:

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 of user interactions and analyzed it. Here’s how the options looked:

directional cues in web design

directional cues in web design

directional cues in web design

directional cues in web design

directional cues in web design

directional cues in web design

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

directional cues in web design

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

directional cues in web design

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 as with an arrow. That is the reason why a variety of arrows turn up here and there in interfaces to help the user not to 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 on forest camping uses arrows prompting on interactions with horizontal slides.

home decor ecommerce website

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

hot dog maker ui design

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

landing page animation

Dance Academy landing page uses arrows to prompt the users that there are interactions a horizontal slider.

tubik studio web UI design

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

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

hiring artist website design illustration

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.

mail service landing page

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.

luggage delivery service landing page

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.

mail management system landing page

Hero illustration at 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 are focused on some point or object, they have a natural urge of curiosity to check what it is. That why this trick is often used with visual content like photos or illustrations integrated into UI layout.

hair beauty company website

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.

landing page design

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

webdesign hair accessories ecommerce

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 demonstrating the product but also working 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 take additional effort to understand how the interface works.

architecture studio website

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

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

fashion model portfolio

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

healthy meals delivery service

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.

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

UX Writing: Handy Tips on Text Improving User Experience

3C of Interface Design: Color, Contrast, Content

Negative Space in Design: Practices and Tips

User Experience: How to Make Web Interface Scannable

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

Light or Dark UI? Tips to Choose a Proper Color Scheme


Welcome to see the designs by Tubik on Dribbble and Behance

designing-web-interfaces-in-position-absolute

Where we come from and the current situation

I started designing for the web in 2011 and working in 2013. One of my first jobs was at Microsoft as an intern in their design team located in Helsinki. At that time most of the resources for UI were made in Photoshop. Yes, Photoshop, a tool for editing photos was the same for designing web pages. Using this tool, I could export images that were passed to development and they would do all the magic to bringing it to life through code. But, they didn’t coded it as I expected them to do. The design never fit exactly what I had designed and it frustrated me, a lot. I didn’t understand it, so I decided to learn how to code frontend, to understand what the problem was and how it could get it solved.

Some time later, I started learning how to code HTML and CSS properly and very soon I was already writing production code in a smaller company. Of course, not leaving the design work. That’s when I began to realize that there was something weird, even a bit wrong, with the process. Why did we design static images when the web was not? Why couldn’t I design a button that fit its content instead of adjusting its margins manually as it did when coding on the web? Why didn’t my designs adapt to the screen’s width with relative styles as I could make it do when coding? Why did it seem like I was designing in “position: absolute;”?

And not only that, while the designers were doing handicrafts, in development they used Git as version control, working as a team and in a totally safe and organized way thanks to it.

Until one day, Sketch came out. I remember that I started using it at the end of 2014. It seemed the revolution, surely the designers who are reading me right now can affirm that our quality of life was improved so much. Finally a program only to design UI!
A program where there were not a thousand buttons that you didn’t need, where you couldn’t not only export images, but also SVGs! And everything was much faster and easier than using Adobe. It also had plugins that looked like super powers to me compared with the old-fashioned Photoshop.
But the really game-changing feature was its symbols. We could finally save designs, reuse them and sync them throughout the tool, it was great.

Also new other tools like Zeplin came out. This ones helped the developers (that didn’t have Sketch) to implement our designs. But let’s not fool ourselves, the CSS generated by Sketch or Zeplin rarely ends in production or is event relevant. Some stuff like colors, spacing or shadows can be useful but nothing else. We don’t even use plain CSS in most of the frontend projects, but we use CSS preprocessors like SCSS.

Some time later, in 2017, Figma appeared in the market, and it has gained a lot of attention for these reasons:

  • It runs on the web and have a free initiation plan.
  • Real-time collaboration in the same file.
  • Version history (not version control tho)
  • Web API which we can use to dynamically export information from any Figma file.
  • Plugins, surely the strongest feature of Figma at this time. Although Sketch already has plugins, thanks to the web API that I mentioned before, Figma’s plugins are much powerful.

I think that both real-time collaboration and version history is a great step, although I’d like an independent version control to the program and preferably hosted where the code is, to centralize resources. What it surely has to improve is its API, where the results it returns are still very poor, especially related to components and styles, which makes it impossible to connect frontend and design, one of my wishes for this API.

We haven’t still solved the key problems

Yes, Sketch or Figma are much better than Photoshop and the industry continues to evolve constantly, but we haven’t still solved the key problems:

  • We design and implement the same website 2 times and there are even differences between them! How much time have we lost designing a rule for x pixels spaces and then in development has not been implemented like this or we haven’t even been able to apply that rule in all the elements on our design? It’s not the developer’s fault, nor is it the designer’s, but the medium (the design tool) which is the only one to blame. The difference between the designed concept and the developed product will always exist as long as they are separated.

  • Current tools don’t allow us to design responsively. I wish we could make relative positions in design. I would love to have CSS media queries to structure the content based on its width. I hate designing the same screen 3 times because it can’t be designed to fit its width. Waste of time. Inefficiency. As a UX Engineer (design and front), I end up not designing the responsive versions for other devices on Sketch because I design them modularly in one width and then I adapt them responsively in the implementation.

  • The web is not flat, it’s not a blank artboard. We are used to creating static drawings that don’t represent reality as a whole: the web is not images or vectors, it’s not flat, it has interactivity. The web also has states (hover, active, focus, visited …), but how are they represented in the flat world of design nowadays? Repeating designs. We design that same element 4 different times to represent these states unreally and we don’t see how the real result looks until it has been implemented.

  • Working without version control means that we cannot work as a team in the same file in a completely organized way. Yes, Figma has real-time collaboration and version history but we are still years away from being able to document and create different versions of the project and then compare and join them as we do with the coding version controls. And no, tools like Abstract for Sketch don’t seem sufficient, since they are not based on web code and we cannot compare objective differences from the same medium.

  • Visual bugs end up in production because we don’t have acceptance tests for our designs. When I speak of testing, I speak about technical acceptance testing, not user testing. Imagine having a way to verify that all the colors used in the design are the official colors. Or another example, that all the measures used are multiples of 8 as defined in the design system. It would be very useful, right? On the development side they are very used to do testing that allow them to minimize possible errors in their work, designers don’t have that when designing, and this leads to visual bugs in production.

Why is this happening?

Many UI designers still keep the graphic design’s mindset, as if designing for the web was the same as designing for offline but with different measures or rules. No, it’s not like that. The medium of the product is totally different and our tools should change depending on it.

That is why I believe that the tools we use to design websites should also not be the same we use to design native mobile apps. They don’t work in the same way, they aren’t developed using the same technologies, they don’t have the same interactions and they shouldn’t be designed in the same way. SwiftUI has taken the step of being able to design with the same code used in development, making it the most suitable tool for designing iOS apps.

The main problem is to separate the concept and the implementation. Do we really need to separate it? Why? As a result we get twice of work with idealized sketches that don’t fit reality and generate frustration between the design and development teams.
Unlike other design modalities, web UI designers have the privilege and great luck of being able to use the same medium where it is implemented to conceptualize that design. But the current design tools are far from how the web works, they keep the mindset of separating the concept from the implementation as is done in all other design modalities. You cannot design buildings in your same medium, using those same buildings. But we can design using the web, since its material (HTML, CSS and JS) is flexible enough, through a graphic tool, to allow us to conceptualize having the same speed and fluidity as with a vector-based tool like Sketch.

As Colm Tuite mention in his article: “Design tools shouldn’t need to resemble or reflect the web and its nuances — they should just BE the web.”

Design systems

Our favorite topic, design systems. But we barely mention how incredibly difficult it’s to maintain two design systems. First, the one maintained by the design team and second, the one maintained by the frontend team. And when you have two different projects with different technologies and maintained by different people, they will never, ever, have a total consistency. And therein lies the problem, the duality.

I get tired of seeing very nice design systems that when inspect their code I realize that those websites are implemented differently than how they were designed. Which is silly, because why to spend time defining a design system if your frontend team ignores it or can’t implement it? A concept that doesn’t get developed well or at all is just useless.
Wouldn’t it be better to have a single design system? A single source of truth?

What kind of tool do we need to solve these issues?

I imagine the perfect design tool kind of like a Storybook where the designers could have the components of a design system written in code, the same ones that front-end would use in production, so we wouldn’t need to maintain two design systems, we would only have a single one.

By dragging we could combine these components to create organisms where CSS would be applied from a graphical interface that could reflect the real properties of the web, such as relative measures, media queries, flexbox, CSS Grid…
The same could happen with the animations, we could animate those web elements with CSS animations. And most importantly, our designs would stop being JPGs to be HTMLs. Accessible, responsive and above all, real.

In addition we would solve the version control problem and the creation of acceptance tests. Being a tool based on web code there would be no problems with creating that version control. You could preview by graphically comparing the HTML files displayed by the browser and choosing which version you stay in addition to objectively viewing the web code that has changed. Also, there wouldn’t be any problem creating any acceptance test since code would allow it.

Luckily, there are already some tools that work like this and although they may not solve all the issues listed in this article, they are on the right track.

  • Framer X: its hype in 2018 was tremendous with the announcement that their designs could be exported to React or we could design using components previously programmed in React. Although it was a huge step, we later discovered that the code isn’t intended to be production ready but to resemble React as closely as possible. And here we find the main problems:
  1. Separating design and development by not creating production ready code means working twice.
  2. Locking yourself in a framework. I believe we should try to use web standards such as HTML and CSS for styling as much as possible. Using React, Vue or Angular should be a JS layer above styling that controls the reactivity of the webapp and it should be delegated to the frontend team, not to the design tool.
  • Webflow: It’s a great and mature option and it meets the vast majority of points. The only problem is that the generated code is saved in its own hosting and it seems impossible to edit out of the graphic editor.

  • Modulz: falls into the same problem as Framer X when exporting code only in React. The main advantage is that it exports production ready code and it uses CSS properties for design styles such as flexbox and native states.

  • Hadron: although it’s still in version 0.14, it’s going in a very good direction. On its website we can see how they solve all the problems raised in this article (including responsive design) with mediaqueries or grids made with CSS Grid. I think it’s very promising.

  • Mason: It is a tool to create UI code from a graphical interface by replacing the text editor. It seems to have a lot of potential.

Finally, I will not go into the “debate” of whether UI designers should know how to “program” (what a broader term!) Because I think there shouldn’t even be such a debate.
Being a UI designer and knowing how the web works and therefore HTML and CSS, which are purely declarative languages, is as basic as knowing physics as an architect.
Design tools have to help us working through graphical interfaces that provide us speed versus code editors but the implementation should be the same.

Continue reading on the subject

What do you think about it?

And you, what do you think of the current design tools?
You have already read my opinion about it, I would love to read yours on Twitter @marinaaisa