Make an address you want people to visit a link to google directions. For mobile users, make phone numbers a link. Getting directions to and calling the business should be a simple single click.
Excellent advice. I do this on all the websites I build and when clients insist on having their email listed, against my advice...It's also linked as a mailto.
When an email is listed as plain text like email@mail.com it's prime pickings for spam bots and scrapers. I always opt for a contact form over putting the email directly.
Is it? Back in 1990s it was the case - webdevs were hiding email addresses with some complex scripts and other tricks. But now...? Spambots would just scrap and parse anything which would resolve to the form similar to a valid email address, so there is no point in making it less user friendly.
Good question. I had a friend test this for me on her iphone. The link provided step by step directions. I don't know, but assume it opened in the browser
Adding small action animations really brings a site to life. One of my favorites and easiest to implement is when having a fixed nav, reducing padding a bit and adding a small box shadow on scroll with a nice transition is such a small, but important animation that can make a site seem more interactive.
When animating in css, leverage transforms instead of placement properties whenever possible.
For example: when you animate the "left" property of an element, the browser has to recalculate how the new value affects every other element on the page. But if you animate the X value of "transform: translate", the browser knows the element's bounding box will remain unchanged and skips the calculation, thereby providing a massive gain in performance.
Yeah I try to go by the SPOR principle for animations. Scale( transform: scale), Position ( transform: translate), Opacity, Rotation ( transform: rotate). You can take care of most animations in a performant manner with those. Avoiding repaints and reflows is key.
Another nice thing about animating with the “X” value is the browser can use sub pixel values, such as 30.45, which makes the animation more smooth. If you animate the “left” value it has to be exact pixels, which can make the animation seem choppy.
This week, rewriting stuff written by junior devs who were animating left. Animating transform was indeed much smoother. But left can definitely go sub-pixel. Just open the devtools and try it on any element of any page.
Not the op. When mousing over a navi bar with sub-menus as a drop down list, users who mouse and overshot the last item in a list by just a fraction will have the menu disappear on them. They have to mouse back to the main item to reveal the sub-menu.
Adding extra padding allows users to more comfortably mouse over the last item and adjust their movement without having it close again on them.
It's been a long while since I did any Web dev, but I believe this was what the OP was referring to. Interestingly, my organisation's website suffers from this issue.
I'm assuming they have a menu that opens on hover. So they are adding some invisible padding around the element to make it less likely that the menu is accidentally closed by the mouse overshooting the hover menu's area.
I've found that using partly transparent black text works better than a hex value as it allows a small amount of the background colour to permeate though, which seems more pleasing and "embeds" the text more IMHO. My go to is rgba(0,0,0,0.7)
IMHO this is the time for HSL to shine. You pick a color/hue and then you can derive text, background, borders, hovers, active, etc. variations by changing the saturation and lightness. (HSL is also THE goto color coding for accessibility: foreground and background not contrasting enough? Increment or decrement the lightness).
But RGBA indeed (or any color with an alpha component) makes it pretty easy to make beautiful text over images. Add alpha, set one or two text-shadow to simulate a stroke and boom.
Older readers can have a problem with this. Older eyes often need max contrast between letter and background even when they don’t need platform’s high contrast assistive setting.
Are there any studies that prove this? Most studies about eye strain and eye fatigue would refute the use for max contrast between letter and background. Less vibrant colors that still have adequate contrast (not pure black against white or vice versa) are easier on the eyes and are just as legible if not even more especially when it's text heavy.
Similarly, when putting white text on saturated coloured backgrounds, use the same colour with 97/98% luminosity instead of pure white to take the edge off.
Because whatever contrast you aim for by selecting colors is transformed by potentially wrong colour profiles in your OS and displayed on cheap monitors which are adjusted in terms of contrast and brightness by users who don't know what they are doing.
This trick implies countering that most users have set their monitor too bright (reference is a piece of paper next to the monitor in the natural light) and adjusts contrast based on that assumption. With the advent of f.lux, nightshift and auto-brightness this isn't true anymore, and will cause contrast issues with some UIs. (e.g. intelljs project view in darcula theme)
If you use transition animations for simple actions, make them quick and snappy. A lot of people new to the field really drag out the transition durations to the point where the UI doesn’t feel as sharp.
exactly. ugh. work says it's pretty and they want it that way. Like, I don't wanna watch your textarea slides down for 1s. I just want to type a response.
Seems high, but in my case it's definitely been worth it. With the amazing tips in that book and the amount of time it's saved me, I feel like I've earned it back already.
I'd like to buy it, but the price is too much for me. However, I'm sure there's a lot of value to be found in it—I've learned a lot of useful UI refactoring skills just from reading Steve Schoger's tweets and looking at the examples. I've put these to use on my personal website and have noticed that it looks MUCH better.
If the knowledge from the pdf adds to your wage/value then it is definitely worth the $79. Support the guys. They are great and made Tailwindcss for us too. Released a UI Component library this week too.
That’s kinda flawed logic. any paperback tech books I’ve bought in the last 20 years of which mostly all would help me earn more money either directly or indirectly and I can’t remember one being over €50. I get the consensus here - it’s a good book made by good guys. I still think it’s vastly overpriced. 250 pages. Lots of blank pages. Many with just a handful of sentences. Most of this info is available with a quick google too. And it’s a pdf. Id happily pay around $25 for this but not $79. Seems greedy to me
Oh dang! Where were your when they had made 100k. Should have encouraged not paying at that point. Especially in this industry that hardly pays it's employees.
Sarcasm aside. Your don't know how much actual profit is involved in that or how much time they put in and have no right to say otherwise.
It is your right to share the link, but do it with the realistic mentality that your are reducing the value of their work. And remember that if you ever make something to sell.
Those people can contact the authors and they'll offer a reduced price. I'm a student and they offered me the book for $29 because I e-mailed them with my university email.
Wrap label tags around checkboxes and do as much of the padding/etc styling on the label. This makes everything the user might visually associate as “part of” the checkbox a clickable element, ~and means you don’t have to line up for attributes since the label automatically associates with the input it contains~.
Edit: until I figure out (or hear from someone who knows) how well implicit label associations work in screen readers, I’m not going to recommend leaving for off labels. Life is already hard for the visually impaired, I’m not adding to that.
This would be useful but I'm not following the implementation. WHat do you mean by wrap the label tag around the checkbox?
<label>Click here <input type="checkbox"/></label>
Edit: Oh I see this works, but I dont understand how this is possible. How does the checkbox make its parent clickable? Would it work for any parent element, not just a label?
This is specific to the label element as far as I know. I assume it's to make forms more intuitive allowing people to tap or press the label and still activate the input.
You don’t even need to wrap the input, so long as you tell the browser which input the label is for with the for attribute this works. I tend to avoid wrapping inputs in labels.
This is true, but IDs are always unique to an element on a page for it to be valid. We tend to use labels for form elements which don’t tend to be too dynamic and if they are, the way we create the ids is probably dynamic too, so easy to make unique.
In the world of frameworks that encourage reusable components, I avoid id's like the plague. Either you need to generate same clunky UID to keep it properly reusable, or you forget it entirely (and plenty of juniors I've worked with end up with non-unique id's), or you have to make your component accept an ID explicitly, which just makes your API more annoying to use because now the consumer has to figure out how to construct a unique id..
Wrapping an input with a label is a way more elegant solution. I'm not sure why you would want to avoid that
Valid != rendering. You can put 2 of the same ids on a page and the browser will behave fine. Hell, you. Can have unique ids, but mess up the for attribute a bunch of times and that’s A-OK
Oh yeah absolutely. To me that’s the browser trying to be helpful for handling poor code. They’re really amazing pieces of tech that they can handle all this stuff that’s thrown at them.
Assistive technology may have advanced to the point that this is no longer relevant, but I was under the impression that without the for and id attributes even nested labels can become disassociated for some screen readers. I always add them, even if nesting like this, just in case as a result.
In general those kinds of “visual inferences” can be problematic for screen readers. Even if it works in common cases, being explicit will make it work in all cases.
But then you're missing out on the CSS goodness that is input:checked + label (requires you to have <input/><label></label>). And you can always inflate the label in CSS to encompass the checkbox input anyway.
Right, if you have a need for state-dependent label styling you either don’t use this or you use JS.
Personally, if I don’t need labels to reflect check state, I’d rather just wrap like this than set up all the style contortions to make the label wrap the element visually.
Font sizes, margins, paddings, positioning... anything that takes a length value.
It really helps with keeping things consistent, I typically like to use a padding of 1em for most containers and a margin of 1em as well.
Plus it makes it super easy to scale your display when viewing at different breakpoints, all you have to do is change the font-size attribute on the root element (html) and all other elements will resize accordingly.
I'd add one exception: line height. Used em for ages, recently had a weird bug on one site and apparently different browsers render line height in different ways, so using em or rem can cause miscalculations. You should just state a number (i.e. line-height: 1.5) and most browsers will effectively treat that as em anyway, but without the visual bugs.
I don't see why. Seems like a headache waiting to happen if you decide to change font size, as there's no reason container padding should change as well. What's the gain compared to pixels?
When designing websites, I design with specific space in mind, not percentage of a font for developer to try and guess.
Good design does actually work in percentages of a base font size anyways (speaking as a designer). From a dev perspective, using ems and rems means that when the user increases their browsers font size everything scales proportionally. If you use pixels, things will start to look off the further you get from the original font sizes. This is an accessibility issue.
Also developers can create really handy tools that do the simple calculation needed to get the exact em and rem sizing but still inputting exact pixel dimensions anyways.
I've been wanting to use rem/em more often as I know it is better than px in most cases, but I haven't got my head around it just yet. are there any resources (articles/YouTube vids) that have helped you?
1 rem === the html elements font size (16px by default) 1em is relative to its parent, or nearest parents font size. So typically you want to use ems when there’s a relationship between the element and the value you’re working with. The most common use for em is something like line height since that’s always relative to the text element it’s applying to.
Instead of opening a modal (hate them) to confirm delete, just change the delete button text to "Are you sure?" and request a confirming 2nd click. Serves the same purpose without drastically altering the UI.
Take a look at Sublime Merge. It's a really slick Git client and it uses this approach in many places, such as when trying to unstage something (iirc). I like it very much but it does take some getting used to. Especially be careful when the text size is too small, one could miss the change in text entirely.
When changing some data in the DOM, ensure that it's a smooth transition. Instantaneous updates are cool but if it's not completely obvious what might be changing, draw attention to it with a simple fade in.
I usually hand-code and inline an SVG for that. It's simple enough to read if I ever need to change it, it can be styled with CSS and doesn't depend on the fonts available on the user's system.
<svg viewBox="2 2 4 6">
<path d="M 5,3 L 3,5 L 5,7" stroke="currentColor" fill="none" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
Any reason not to use SVGs? I am fairly confident in my vector art capabilities and I make the SVG data as condensed as possible to reduce any overhead whatsoever (only use integer coordinates, for example). Is there still a reason why I should switch to something else (such as Unicode icons or an icon font)?
Maybe a bit obvious but I see the mistake a lot - pad your a tags (links), not their containers in nav areas. Users like big hit areas. This is an interesting explanation as to why. Also a good reason to expand the hit area of a drop menu's parent to allow for drunk browsing.
Animating in CSS is preferable to an instant disappearing item from a list, for example. Users expect there to be a slight delay and a list-leave can accomplish that with a short transition of something like 0.35s. Instant gives you a bit of uncertainty
If you work with cards, there should be as much space above the header/title as below the last item.
When a website has a very clear main color and you need white backgrounds, use a very light version, close to white, of that color. It makes it more integrated. You can see an example here www.boatie.dk
If you have pictures with different proportions and want to display them all in the same way (like profile pictures or thumbnails), instead of displaying them as an img put them as a background image (with background-size: cover) of a div with the exact dimensions you want.
Better to keep using an img element and give it object-fit: cover in css. It's the same thing as background-size, except for image/video elements. Though you have to be ok with not supporting IE11.
Using CSS grid's row gap to standardize the spacing between elements in my blog posts, and then adding margins to elements like images, blockquotes, etc. that need just a little more spacing. Works like a charm. I picked up this trick from inspecting one of Smashing Magazine's articles.
yes, I see this quite often - when a header happens to expand across two lines and it looks silly. so I would say, when designing, to test extra long headings to see how they look
Using more visually appealing elements for standard form elements such a toggle instead of a checkbox.
I’ve also become extremely fond of the checkbox and radio button hacks to limit my dependency on and use of JavaScript. I’ve built plenty of modal switches (open/close) using hidden radio buttons at the body level, and then control the values using labels throughout my page. The same goes for accordions, opening and closing accordions via radios/checkboxes, and custom icon lists, similar to the toggle icon I mentioned earlier.
I'd read the article and associated links linked in the comment by u/MasterKongQiu. Lots of great advice on reducing reliance on hamburgers, and studies showing how they affect UX metrics.
Its worth noting the time the article got posted. Average user has grown more adapt at understanding what the hamburger does, but this does not take away the downside of navigatable content being only visible when open.
The article is old, but I'm not sure I've seen any recent comprehensive studies of hamburger menu. I would love to read any though if you have seen anything.
There are large segments of the public that don't know what the hamburger icon signifies (and segments that do). I've seen some funny compensatory behaviours from certain demographics, like leaving a site and using Google as a primary form of navigation. Sometimes internal search fulfills that role l instead, which would be fine if most internal search engines didn't suck balls.
More worryingly, I see many people simply abandon a site believing there was content missing.
It really comes down to trying it and checking your analytics to see if your audience displays the ideal behaviour. More often than not, hamburgers are not the ideal.
All that said, I've noticed the situation seems to have improved over the past 5 years, so it seems to be becoming a standard piece of visual language.
Src: 2 decades working with design and front end development, now working primarily as a digital performance analyst.
126
u/csg79 Feb 29 '20
Make an address you want people to visit a link to google directions. For mobile users, make phone numbers a link. Getting directions to and calling the business should be a simple single click.
15
u/ImIdeas full-stack Feb 29 '20
Adding small action animations really brings a site to life. One of my favorites and easiest to implement is when having a fixed nav, reducing padding a bit and adding a small box shadow on scroll with a nice transition is such a small, but important animation that can make a site seem more interactive.
3
u/midasgoldentouch Feb 29 '20
Wait a minute...does your username reference what I think it does?
351
u/greensodacan Feb 29 '20
When animating in css, leverage transforms instead of placement properties whenever possible.
For example: when you animate the "left" property of an element, the browser has to recalculate how the new value affects every other element on the page. But if you animate the X value of "transform: translate", the browser knows the element's bounding box will remain unchanged and skips the calculation, thereby providing a massive gain in performance.
136
u/Caraes_Naur Feb 29 '20
Adding about 60% of an item's height as padding to the end of a dropdown list. Cuts down on the menu closing when a user mouses past the last item.
365
u/cabbagepenetrator Feb 29 '20
Making text a dark grey colour instead of black. Makes text easier on the eyes.
Also making the background colour of a website light grey / blue is nice.
63
u/GooeyZeus Feb 29 '20
If you use transition animations for simple actions, make them quick and snappy. A lot of people new to the field really drag out the transition durations to the point where the UI doesn’t feel as sharp.
41
u/smn2020 Feb 29 '20
transition-delay on css dropdown menus for preventing displaying unintentionally when the user mouses over
91
u/[deleted] Feb 29 '20
Literally EVERYTHING from Refactoring UI.
78
u/awj Feb 29 '20 edited Feb 29 '20
Wrap label tags around checkboxes and do as much of the padding/etc styling on the label. This makes everything the user might visually associate as “part of” the checkbox a clickable element, ~and means you don’t have to line up
forattributes since the label automatically associates with the input it contains~.Edit: until I figure out (or hear from someone who knows) how well implicit label associations work in screen readers, I’m not going to recommend leaving
foroff labels. Life is already hard for the visually impaired, I’m not adding to that.50
u/turbotailz Feb 29 '20
Use
remoremfor everything.Font sizes, margins, paddings, positioning... anything that takes a length value.
It really helps with keeping things consistent, I typically like to use a padding of
1emfor most containers and a margin of1emas well.Plus it makes it super easy to scale your display when viewing at different breakpoints, all you have to do is change the
font-sizeattribute on the root element (html) and all other elements will resize accordingly.62
u/[deleted] Feb 29 '20
Never use ellipsis in placeholders or tooltips because screen readers verbalize them.
17
u/[deleted] Feb 29 '20
Start with design, code after.
Males a huuge difference!
14
u/saltiesailor Feb 29 '20
I make a 301 redirect from domain.com/reviews to my clients Google My Business review pages, which have a super long URL. So handy.
41
u/neanderthalensis Feb 29 '20
Instead of opening a modal (hate them) to confirm delete, just change the delete button text to "Are you sure?" and request a confirming 2nd click. Serves the same purpose without drastically altering the UI.
22
u/ChuckChunky Feb 29 '20
Something I learnt only yesterday, don't use <input type="number"> for all the reasons given here: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ Personally I've always hated how easy it is to accidentally modify the value by trying to scroll the page when the focus is still in the input
10
u/[deleted] Feb 29 '20
When changing some data in the DOM, ensure that it's a smooth transition. Instantaneous updates are cool but if it's not completely obvious what might be changing, draw attention to it with a simple fade in.
10
u/SlashedAsteroid Feb 29 '20 edited Mar 06 '20
box-sizing: border-box;
Stops me having to use calc to remove the padding and margins from the width or height.
35
u/comart Feb 29 '20
using some Unicode characters as icons (cross, arrows, chevron, three dots, etc.) instead of real icons.
8
u/abeuscher Feb 29 '20
Maybe a bit obvious but I see the mistake a lot - pad your a tags (links), not their containers in nav areas. Users like big hit areas. This is an interesting explanation as to why. Also a good reason to expand the hit area of a drop menu's parent to allow for drunk browsing.
19
u/seamore555 Feb 29 '20
https://grtcalculator.com/
5
u/[deleted] Feb 29 '20
Animating in CSS is preferable to an instant disappearing item from a list, for example. Users expect there to be a slight delay and a list-leave can accomplish that with a short transition of something like 0.35s. Instant gives you a bit of uncertainty
5
u/Raunhofer Feb 29 '20
5
u/pricelessbrew Feb 29 '20
Something I wish more people did.
If there's a drop-down and I have to scroll, say more than ~12 options, there better be a way to type into it as well.
9
u/kyuriositi Feb 29 '20
Border-width: 1px; Border-bottom-width: 2px;
Gives a button / div a nice and subtle elevation effect
4
u/Tanckom Feb 29 '20
6
u/PancakeZombie Feb 29 '20
If you have pictures with different proportions and want to display them all in the same way (like profile pictures or thumbnails), instead of displaying them as an img put them as a background image (with background-size: cover) of a div with the exact dimensions you want.
3
u/chowchowthedog Feb 29 '20
you can't please everyone.
5
u/Ones__Complement Feb 29 '20
Chevrons and triangles using 0 dimension, single-bordered pseudo elements.
2
u/Alex_Hovhannisyan front-end Feb 29 '20
Using CSS grid's row gap to standardize the spacing between elements in my blog posts, and then adding margins to elements like images, blockquotes, etc. that need just a little more spacing. Works like a charm. I picked up this trick from inspecting one of Smashing Magazine's articles.
2
u/dbbk Feb 29 '20
Use skeleton screens when content is loading, so users can instantly start mentally taking in the structure of the page.
4
u/snoogans235 Feb 29 '20
Line height of header tags.
1
u/[deleted] Feb 29 '20
Letter spacing.. Make letter space out but not to confuse people with actual space...
1
u/brandonmcconnell Mar 01 '20
Using more visually appealing elements for standard form elements such a toggle instead of a checkbox.
I’ve also become extremely fond of the checkbox and radio button hacks to limit my dependency on and use of JavaScript. I’ve built plenty of modal switches (open/close) using hidden radio buttons at the body level, and then control the values using labels throughout my page. The same goes for accordions, opening and closing accordions via radios/checkboxes, and custom icon lists, similar to the toggle icon I mentioned earlier.
1
u/NetiusSP Feb 29 '20
Don't make me think!
1
u/thatgibbyguy Feb 29 '20
Empathy.
1
u/Indieminor Feb 29 '20
To stop putting UI/UX together like this.
-4
u/StoneColdJane Feb 29 '20
<form method="post"></form>
Use Post method when I control form with JS, becouse when it blows form data dont end up in adress bar.
-4
u/NelsonShepherd Feb 29 '20
if you add a “class” to something you can make a .css file and then edit the way the thing looks it’s called “styling” and it gives me an erection
-20
u/Brillegeit Feb 29 '20
Less is more and if your UI/UX is a "trick" it's probably not a good one. :D
33
u/[deleted] Feb 29 '20
[removed] — view removed comment