By Adham Dannaway on January 8, 2023
Contrary to popular belief, user interface design isn’t just about creating pretty pixels. Of course, making an interface look great is important, but thereās much more to it than that. Learning the how and why behind interface design will ensure that every design detail has a logical purpose behind it. (more…)
By Adham Dannaway on January 8, 2023
The UX design process is becoming an increasingly important aspect of creating quality website applications and software products. There are heaps of different UX design books out there with a myriad of techniques and methods that are important for us to know and use as UX designers.
By Adham Dannaway on January 8, 2023
Iāve been a designer for nearly 2 decades now and Iāve used buttons in many projects, but I donāt think Iāve ever taken the time to think about button design in detail. It wasnāt until recently that I realised Iād been making some common button design mistakes (and Iām not the only one).
If you pull out your phone, open a few apps and browse a few websites, Iāll bet you come across quite a few buttons. Iāll also bet that many of those buttons have issues that pose a potential risk to usability and accessibility. There are a lot of problematic buttons out there, even from large companies and experienced designers, so I put together some quick and practical button design tips to avoid these problems and design better buttons.
Firstly, Iāll go through some popular button designs and highlight their problems using objective UI design principles. Iāll avoid any subjective thoughts based on aesthetics, āgut feelingā, or what looks pretty. I also wonāt go into code here, as thereās a lot we can do on the design side of things first. Iāll finish up with some button design tips and suggestions for best practice button design.
For most projects, your design system will need 3 button styles; primary, secondary and tertiary. They need to have a clear visual hierarchy to display actions of varying importance. In this article, weāll compare groups of these 3 button styles.
Iāve highlighted the issues with some popular button designs below. These issues pose a potential risk to usability, so itās safest to avoid them if possible. Weāre aiming to at least meet WCAG 2.0 level AA accessibility requirements as this is the most common standard and a good place to start.
To help the vision impaired tell the difference between user interface components (like form field borders, buttons and tabs), interface components need to have a colour contrast ratio of at least 3:1. Decorative styles that arenāt required to distinguish interface components can have a lower contrast ratio.
In this example, the secondary button fill contrast ratio against the background is less than 3:1, which is too low to clearly indicate the button shape to the vision impaired. Some may argue that the secondary button fill is decorative and doesnāt need to have a contrast ratio of 3:1 to be accessible, but I think the fill is needed to identify the secondary button as an actionable element. Without the fill, itās just plain blue text with no affordance but colour. We could also add a border to the secondary button to fix this issue.
Itās common for disabled buttons to be light grey in colour. The secondary button in this example could be mistaken as being in a disabled state due to its light grey colour. I think itās safest to avoid light grey buttons to reduce potential confusion. Iād also suggest avoiding disabled buttons if you can, but thatās a discussion for another day.
To ensure that a wider audience can read small text (18px and under), it should have a colour contrast ratio of at least 4.5:1. The button styles in this example have the following issues:
These button styles have similar issues to the previous example:
These button styles are too similar for the vision impaired to distinguish between them. The contrast ratio between buttons is the only way to tell the difference between them and itās too low (contrast needs to be at least 3:1). Buttons should have a clear visual hierarchy that doesnāt rely on colour alone.
These button styles have similar issues to the example above:
When it comes to accessibility, itās important that we donāt rely on colour alone to distinguish interface elements. Those who are colourblind wonāt be able to tell the difference between elements.
In this example, the tertiary button isnāt accessible as the only indicator that itās actionable is colour. This means that those who are colourblind may not be able to distinguish it from plain text.
The context, position and close proximity of the tertiary button to other buttons may help distinguish it from plain text in some cases, but thereās still a risk that it may cause confusion.
Every detail of an interface design should have a logical purpose. Why are the primary and secondary button shapes different in this example? Do they act differently? Avoid inconsistent button shapes as they can cause confusion.
Visual hierarchy is how we communicate the relative importance of interface elements. The purpose of the 3 button styles is to indicate which actions are more important so that people know what to do next. The button styles in this example have the following issues:
Based on the button design mistakes above, here are some quick and practical button design tips to keep in mind to design user-friendly and accessible buttons:
I suggest using the following button styles as theyāre very familiar, accessible, and have a clear visual hierarchy that isnāt dependent on colour alone.
You might have noticed that the tertiary button looks identical to a text link, but is that really an issue? Traditionally text links were designed to go somewhere and buttons were designed to perform an action. These days, many are unaware of this interaction pattern and certainly wouldnāt expect it, so I donāt think we need to stick to it. Just ensure buttons are coded as buttons and links are coded as links, regardless of what they look like. This will help you avoid accessibility issues with screen readers.
In the below hero banner example, important call to action links are made to look like buttons to make them more prominent and create a clearer visual hierarchy.
In the below message dialog box example, we can see our 3 button styles in action. Even though the tertiary button looks like a link, itās clear in this context that clicking it will perform an action rather than take you to another page.
Iām not saying that these button designs are the only way to design buttons, but theyāre free of the many usability and accessibility risks mentioned above, so theyāre a pretty safe option. I hope you found these button design tips helpful and Iād love to hear your thoughts or feedback via Twitter.
This is just 1 of over 100 logic-driven design guidelines from my UI design book. If you found it helpful, check out the book and follow me on Twitter and LinkedIn for daily design tips.
By Adham Dannaway on January 8, 2023
Some very clever developers on Reddit have put their creative minds to the test to come up with some crazy ideas for the worst volume control UI design in history.
Obviously, there isn’t anything wrong with the standard volume control slider, it’s been around for ages and does its job well. As per Jakobās Law, itās safest to stick with common, tried and tested UI patterns that people are familiar with. If youāre not reinventing the wheel, thereās usually very little risk that there will be usability issues with your UI design.
Playing it safe might sound a bit boring, but you can save a lot of time and money on user testing by sticking with what people are used to. It will also give you more time to focus on solving more important problems that will make a larger impact.
That being said, I love these crazy ideas on how we might reinvent the volume control to make it super complicated to use. Check them out below and let me know your favourite via Twitter.
I hope you enjoyed these as much as I did, let me know your favourite via Twitter. You can also find more examples on Reddit.
If you’re looking to improve your UI design skills by applying practical, objective UI design principles, feel free to check out my UI design book and follow me for more tips.
By Adham Dannaway on January 8, 2023
Over the years, a lot of you have asked me about how I got into design and built my career as a product designer. I thought it was about time I wrote it down and shared my story. Donāt worry, I promise I wonāt write about myself in the third person. 😉
(more…)By Adham Dannaway on January 8, 2023
I created my first portfolio website way back in 2008 when I finally had enough design work to justify building a website. I was young, inexperienced and relatively unknown in the design community and I wanted to create a website concept that would help differentiate me from other designers.
(more…)
By Adham Dannaway on January 8, 2023
I’ve just finished reading The Mobile Book, put together by the very talented guys from Smashing Magazine, and I’m pleased to say that I thought it was an interesting and informative read. (more…)
By Adham Dannaway on January 8, 2023
(This article was last updated on 23 May 2018)
When you’re building website templates, user interfaces or initial application prototypes there is often the need for placeholder images or dummy images. Rather than wasting time and effort finding and cropping custom images you can simply use a free image placeholder service that will automatically create an image for you with your specified dimensions. Here are some of the best free image placeholder services on offer. (more…)
By Adham Dannaway on January 8, 2023
As web designers we’re all getting a bit bored of using the same old web-safe fonts. Do Arial, Verdana and Times New Roman sound familiar to you? Luckily it’s very simple to embed custom fonts in your website these days. There are plenty of different ways to do it including sIFR, Cufon and @font-face but one of the easiest and best ways to do it is using Google Web Fonts. (more…)
By Adham Dannaway on January 8, 2023
The logo design process can be very time consuming as it is often quite difficult to come up with logo design ideas that match our clients’ requirements. There are so many different elements you need to consider when designing a logo including colour, typography, balance and symbolism to name a few. So where do you start? Today I’ll show you a step by step logo design process which will hopefully add some logic and structure to the very creative and sometimes haphazard task of designing a logo. (more…)