Probably don’t use 100vh on mobile web

I was very happy about viewport units and was using them a lot to get full width, full height elements on screen until recently, I came across strange bug – setting element height to 100vh works like magic on desktop/laptop screens, but fails miserably on mobile for one simple reason – they take into consideration the browser address bar which is visible initially and hides when scrolling down.

JS based soultion

At first I found a javascript based workaround using a CSS variable --myCssVar set to 1% of window.innerHeight and calculating element height via:

height: calc(var(-- myCssVar, 1vh) * 100)

This solution isn’t perfect – it also needs a screen resize handler to update window.innerHeight value and you probably want to use some sort of debounce function for that also. It works on moderns browsers only, which means IE <=11 are left behind, because they don’t support css variables.

CSS only solution

The simple CSS only solution is to have your CSS height property defined from the root html, body elements all the way to the target element, that you want to be full height. In my case I needed to make a full height modal, so I set:

html, body {
height: 100%;
}

The easiest way is to have your full screen element as immediate child of <body> element because setting it to 100% it will inherit the height from parent container, which in our case would be a body tag. If you element lies in a deeper level – you’ll need to make sure every element on your way to the target has height property defined.

5 research strategies for relevant design principles

In this article I am willing to share a few ideas that have helped us to define design principles at our company.

Like me, you may be overwhelmed by a myriad of principles companies are publishing these days. Aiming to define the most relevant ones, your team should pay attention to qualities of effective design principles and sources to look for them.

As Alla Kholmantova states in her book “Design Systems”, good principles promote shared values about what a good design is for your team and help prioritize and make design decisions.

There are at least 5 strategies to define design principles:
  • Determine what current and desirable aspects of your product / design process / organisation culture contribute to company’s vision, goals
  • Conduct a UI inventory
  • Check the list of design issues
  • Analyse design discussions and become aware of how design decisions are made
  • Do user observation
The desirable values of product, process and culture

The first step for developing relevant design principles is to get an common agreement on desirable company’s cultural values, design process values and the values of your product. Those that contribute to company’s goals. Design principles will give a direction and advice on how to achieve these values.

The guidance for finding these could be found in company’s vision statement, values and objectives. Product values come from different sources – business, design, marketing . It should be a unique set of qualities which set a product apart from competitor.

UI inventory

In case you are working in a larger company – chances are you have more than one project going on. It’s a good idea to be aware of visual and interaction inconsistencies in UIs, comparing how the same problems are solved in different projects. Could it be solved in a better way?

As a designer, you probably will easily remember the design pain points. Having a wall full of the most important UIs printed out promotes design discussions in the office. The bird’s-eye view also helps to spot differences and shared themes easily, e.g. scattered layout of data input fields, lack of meaningful grouping of information, lack of visual priorities, and as a result, lack of attention direction, visual inconsistencies.

All of these issues are a good source for design principles, e.g. Ensuring meaningful data grouping in context is more important than plain consistency or Meaningfulness over consistency. We make sure that users have no doubts about information grouping.

Design issues audit

Next strategy is to look up the UI issues/bug list and to spot the tendencies there. Group all the issues in relevant themes, like “Visual consistency”, “Interaction mistake”, “Data grouping”. Find out the tendencies – it is another source for design principles. E.g. if you find a tendency of visual consistency issues, you can dig deeper and try to understand what are the reasons of those inconsistencies.

Maybe a visual style guide could be improved or maybe it is a result of lack of design ownership in the team? Maybe some views weren’t updated with latest design changes? In any case answering such questions can lead to new insights and design principles.

Discussing design and design decisions

Being aware and staying curious on how design decisions are made in your team could give ideas for processing related principles. Ask yourself questions like “What kind of discussions are most common in design meetings?”, “What conflicting requirements come up most of the time?” or “What kind of people participate in discussions? Do these people have design background?”, “Are design decisions being made with the context of use in mind?”, “How often design decisions are made based on assumptions?” Again, answering these kind of questions can lead to new design principles, e.g. Start with user needs, Don’t assume, Empathize with users, Understand the context you are designing for. Of course these should be more detailed to help team understand the meaning.

User observation

Observing users is probably the most insightful and valuable source of ideas for effective design principles. Nothing can be more convincing than seeing users struggling to complete a task or trying to recover from an error.

During one user observation session our team saw a user scrolling between two lists (positioned in a column) up and down to map the information. Each time the user wanted to fill data in the second list- she needed to locate the specific information on the first list. Naturally, this was an obvious design failure, but it has led the team to design a principle All information needed to complete the task should be readily available in one context. Don’t let the users to become annoyed by forcing them to look for information across the whole view.

It’s also worth mentioning that design principles are useless until all teammates agrees upon them, so it’s important to involve all team in developing them. Getting buy-in from management, developers and QA people can be challenging, but it’s possible by showing the value principles will bring to those different groups of people.

Staying aware of what success looks like for the company, the UI flaws and design process helped us to define relevant design principles for our company. Hopefully you got some ideas on how to start defining yours.

CSS transitions in sync with display property

Update: I don’t recommend using this technique anymore for managing keyboard focus, because changing it triggers browser to recalc styles/layout. There is a better way to do this – with tabindex=-1

Positioning an navigation block outside the visible screen area does not prevent focusing elements resting inside with Tab key. This behavior causes confusion about the current focus position.

Disabling mouse interactions on given element is easy to achieve via pointer-events:none; To disable keyboard interaction for any focusable UI element we need to either set tabindex=-1 or remove it from the DOM with display: none;  property. As we know display property is not animatable for a good reason – changing display property to none removes element from the DOM and as a consequence – triggers browser to recalculate layout, paint and composite. In other words – too many dependencies to take into account for browser to make a smooth transition.

Continue reading “CSS transitions in sync with display property”

Discussing design: always consider at least one alternative

Yesterday I had an initial blog redesign meeting with a designer and a stakeholder. The purpose of the meeting was to present and discuss our initial redesign ideas. The designer already had a vision of how to improve the current information structure and content presentation. She brought some paper sketches as a mean of communication which I admire and I was there to contribute with my insights.

Continue reading “Discussing design: always consider at least one alternative”

Checkbox click area improvement

Checkboxes and radio buttons originally always were quite small UI beasts. I found a GOV.UK blog post about improving checkboxes and radios recently. They did an interesting usability finding – users don’t click on the titles – they usually click on the UI elements themselves. Now, that is interesting! It means we should make these small UI elements to be more friendly to clicking mistakes. Continue reading “Checkbox click area improvement”