How to Make Your Website Not Ugly: Basic UX for Programmers - Hilary Stohs-Krause

This talk was recorded at NDC Oslo in Oslo, Norway. #ndcoslo #ndcconferences #developer #softwaredeveloper
Attend the next NDC conference near you:
ndcconferences...
ndcoslo.com/
Subscribe to our KZbin channel and learn every day:
/ ‪@NDC‬
Follow our Social Media!
/ ndcconferences
/ ndc_conferences
/ ndc_conferences
#ui #ux #web #code #ndcconferences #ndcoslo
If you’re a programmer who has ever found themselves inadvertently (perhaps unwillingly!) straddling the line between design and code, this is the talk for you.
Even with zero design training or background, there are numerous small, simple and practical ways you can vastly improve the look and usability of a website. In this talk, we’ll explore 10 of them together, using research and proven solutions to see how the impact as a whole for both clients and users is greater than the sum of its parts.

[@shanermahmud1086]

I can't believe I watched the whole video. My attention span is usually about 20 seconds. Very interesting and informative lecture. Thank you!

[@SaschaRissling]

wow this is me.

[@carlitoz450]

What a great conference. Boring is great! But your talk isn't for sure. Thank you so much for sharing. I've learned and realized so many things there.

[@danielgillespie7899]

This might be super-basic to some people but I think it's worth saying. To assist with padding and margin and gap and spacing in general I would recommend using increments that match your base font-size. So if that is 16px (16px is the browser default and it should not be any smaller than that for accessibility reasons) use 16px as the base unit of your padding and margins, etc. This helps to harmonise the page. To make this super-easy you can use the rem unit. 1rem corresponds to your base font-size (the font-size set in the :root element in CSS - if you don't set one it will default to 16px). So 1rem is 16px (in this scenario), 1.5rem is 24px, 2rem is 32px, etc. The most commonly used breakpoints for webpages also happen to be multiples of 16px. That's not an accident. Take Bootstrap's breakpoints for example: 1400px (87.5rem), 1200px (75rem), 992px (62rem), 768px (48rem), and 576px (36rem). Aside from the first one with has a half rem unit the others are all whole rems. 1024px is another common breakpoint with is 64rem. Not a coincidence. If you set everything you do measurement wise in rem it also makes the page more accessible. Users can set their own base font-size in their browser. So for people with some visual impairment they can set a larger base font size. If you set your font-sizes directly in px (e.g. font-size: 16px; in CSS on an element) it will not change in size if the user changes their default font-size in their browser. And it should change. So set the :root font-size in px and then use rem on your actual elements. When the user changes their font-size in their browser it overrides the 16px in the :root and then changes all the font-sizes on the website. If you set font-size, spacing, and breakpoints all in rem the page won't break if the user uses a larger font-size. It will simply give them a larger version of what the page would look like on a slightly smaller screen in terms of layout. So no text horizontally spilling out of containers because now the font size is too big for them. An added bonus, and I had this recently, is that if you decide at some point that the font-size is too small, you can just up the 16px to 18px (or whatever) in the :root and everything else magically adjusts and stays harmonious. You can change one number instead of completely redoing all of your spacing. Now all of that said, Hilary's point about setting paragraph width in ch units is sound advice. If you're using frameworks/packages like Bootstrap or Tailwind, try just doing some plain old CSS (or even better SCSS which is basically the same but with extra functionality to make it even easier). CSS isn't hard. And you might find that you write less styling code by just writing CSS/SCSS. Those frameworks/packages require you to repeat the same styling over and over again on every single element. And it clutters up your HTML so that's it's nearly unreadable. And if you want to change something, guess what? You have to change it everywhere instead of just one place. And CSS is fun. Making beautiful websites is hard. It takes time, experience, and a certain amount of design flair. But making functional websites that are not unappealing (they might not be appealing but at least they're not unappealing) is not that hard. It still takes practice, of course. But you only need to semi-master a small number of things. 1. Size and space things appropriately and relative to each other. 2. Pick a font that isn't absolutely hideous or hard to read. 3. Don't use a serif font for main text, save those for headings, unless that text is larger than normal and very well spaced (as well as increasing the line-height you can increase the letter-spacing to make it easier to read if you really have to have a serif font). 4. Pick a colour scheme that isn't horrific. This can be challenging for some. But there are plenty of of tools available to help you. First of all, learn what the colour wheel is. No, not that one (RYB). One of these ones (RGB or CMY). The RYB one is use for mixing colours (like paint or other pigments). The "complimentary" colours on that colour wheel are not, in fact, complimentary. Red and green are not complimentary colours. I will scream that from the rooftops until I die. There's a reason we only use those colours together once a year. Because they look horrific together. And I can hear you saying it, "But there are loads of red and green logos of major companies". Yes. And they're all disgusting. So use one of the other colour wheels where the complimentary colours are actually complimentary. But it's very easy to remember, even without a colour wheel on hand. A primary colour from the RGB colour wheel is complimentary to a primary colour from the CMY colour wheel. Red with Cyan. Green with Magenta. Blue with Yellow. Adobe (who are awful) have a very useful tool on their website, and I'm sure you can find something similar elsewhere, where you can upload an image and it will pull a colour palette from it for you (you can then tweak it by dragging the colours around the image). That can a great place to start. Find an image that you're going to be using prominently or just one that evokes the "vibe" you're going for and start there. And for God sake, no rainbows. Much like red and green at Christmas there is one time of year when it is acceptable to use a rainbow. The rest of the time, no. Unless it's literally for small children. Then you can have a rainbow colour palette. I did a toy store project where I used a rainbow colour palette (they literally had rainbow in their name so I didn't have a choice) but even then I had to tone it down. Seven bright colours is like four bright colours too many. More colours is not necessarily better. 5. Gradients... Much like rainbows these can look awesome is applied well or completely hideous when not applied well. Generally-speaking, subtlety is the key. I once saw someone, and I still find this difficult to talk about, use a gradient of bright red to bright green. And yes, they were a programmer. I comfort myself by imagining that they have red-green colour blindness and were therefore unable to comprehend true scale of the atrocity they had committed. On a good day that's enough to get me through. Do not transition radically different colours into each other. It will look hideous. Subtlety. 6. While we're on colour, avoid using literal black and white. By which I don't mean don't make a monochromatic, artsy black and white website. They can look amazing. When done right. But that's super hard. What I actually mean is use something that is not quite black and something that is not quite white. That can elevate a website in 30 seconds (put your colours in CSS or SCSS variables and then you only need to change one thing to change the colour everywhere it is used on the website). 7. Text colour and background colour matter. People need to be able to read the text. Including people with visual impairments such as colour blindness. So contrast between background colour and text colour matter. If there is sufficient contrast between the colours even if someone is colourblind or has a contrast loss visual impairment they will stand a much better chance of being able to read the text. You can get browser tools to simulate a range of visual impairments and you can feed your colours into various websites like the one Hilary showed to check the contrast between all the possible combinations. Then you know what is safe to use. 8. Images do matter. Even on an app where there's not as much screen real estate for them. We are visual creatures. So sign up to an affordable stock image website (Freepik is good) and download something beautiful. Or quirky. Or cute. Or cool. Or whatever it is you're going for. And try to stick to the same style of image across to website or app. Find an artist on one of these platforms that has something you like and then check what else they have in the same style. You can get lucky and find a whole bunch of images that you can use for the entire website or app. But whatever you use should serve a purpose. Maybe that purpose is just jazzy the place up. Cool. But don't go overboard. Don't have massive images that serve no real purpose. But catching someone's attention is a purpose. But to do that the image needs to be meaningful - in some way. 9. Animations are cool. Too many animations or animations that go on for too long or move too fast are annoying no matter how cool they are. Calm down. 10. Make a button look like a button. Do you want me to click on that? Well then make it something that looks like something I'm supposed to click on. You can get fancy-pants with it, sure, but it needs to look like a button. Do not make the user guess. This goes for things other than buttons as well. It should be clear to the user what they are supposed to do. If you can do those things, you can make something that is not hideous. And it might even stray into perhaps being somewhat good. So have at it. And remember: No red and green unless it's Christmas.

[@Vivraan]

Dark mode complicates things.

[@Arianwubbe]

Thanks, great advice!

[@Dutchtraordinary_Living]

Thank you for taking the effort to write this all out, very helpful (and I'll remember about the red &green;))

[@yeskaminakuritsova9368]

Thank you so much for this ❤

[@KimBrusevoldTV]

I feel targeted by this title 😂

[@davidlafontant2973]

I'm targeted by the title😊

[@Wignu]

I stopped watching when she brought up the website from 1996, it looks like one I did last year 🥴

[@kneekoo]

@@Wignu Unless you're a time traveler from 1997, you should watch the rest. 😆

[@skidkadda]

Lol, yes I read “ugly” and thought… that’s for me 😅

[@genxer1824]

@@kneekoo We're all time travelers from 1997.

[@frankzeppelin]

38:57 This is a great point. Ambiguity is bad and surprise is bad: the dopamine rush of "Hooray, I guessed right!" doesn't offset the sense that you're still guessing your way through an interface. I train users on E-health systems with all of these great features that are largely under-utilized. Guessing wrong can make people feel stupid, if only for a second, and it discourages them from exploring more.

[@Vivraan]

What I read from this is: websites and souls-like games both do their very opposite jobs well in different contexts.

[@MattBramer]

Whoa, this was incredible. Helpful, interesting, and I'm going to implement these into my current and future projects. THANK YOU!

[@ratsock]

This title is peering into my soul

[@kahnfatman]

What am I doing here as a backend developer? My CLI is gorgeous across the TCP/IP/Dataframe/Switches stack

[@kellyaquinastom]

Let's make a cli website standard!

[@seancharles1595]

Yeah, ESC[2J for the win

[@PierreH1968]

Interesting that the use of the floppy disk icon for "Save" is not ok, but the use of a magnifier for search is fine when Sherlock Holmes predates the floppy disk by over 100 years... Great video!

[@yeskaminakuritsova9368]

Lol great observation

[@thatolebethe8069]

Amazing talk. Thank you. This is just what I needed

[@alexanderroan]

Only 10 mins in, good video so far :) Just want to comment on accessibility + the unit of measure 'px'. It's best to avoid using use 'px'. If you hardcode 'px' in CSS your element will not scale based on user specific browser settings or any responsive functionalities you are using. If you know you want your text for a normal user (with default browser 16 normal size) to appear as 18px, then convert 18px to a relative unit of mesaure (rem/em) and use that. Hilary also highlighted the importance of using list elements. This is doubly important for screen readers and other tools accessing your site. If you put a list in 'p' certain users will not know it's a list. To build on this you should always try to use the correct semantic of HTML; heading levels, articles, lists etc.

[@williamtdavis986]

this is so helpful! talented public speaker

[@NicolasEmbleton]

Really good presentation. Enjoyed it a lot.

[@DrJub]

Functionality is secondary to aesthetics is so counterintuitive.

[@altertopias]

I think non devs take functionality for granted (because they're not really used to things not working)

[@kneekoo]

It's not counterintuitive when you consider first impressions. You can go to some website with great functionality, but if it's infested with ads, there's a big chance you won't discover its true functionality just because you prefer going to a different website. It's the same with people - aesthetics can raise interest, but then people talk and sometimes you lose that interest really fast. 😅

[@Eupolemos]

Amazing talk

[@santossilva]

For small text use sans-serif :) Yes, serif fonts are generally easier to read at smaller sizes. The tiny strokes or “serifs” at the ends of letters help guide the eye from one letter to the next, making the text more readable, especially in printed formats. These details create a smoother reading experience by helping our brains recognize letter shapes more quickly. However, for digital screens, sans-serif fonts are often recommended for smaller text because they can look clearer and sharper on lower-resolution displays. So, if it’s for print, serif works well at small sizes; for screens, sans-serif might be better.

[@bartkl]

From what I've understood, nowadays such low resolutions aren't really a concern anymore so you probably do get the benefits of serif with smaller text on digital screens as well.

[@feldinho]

While this is a valid point, I think this is less and less applicable now that higher-DPI screens are getting more common. Also, small text used to be 12 or 13px so we could fit more content on smaller screens. At 16px+, the serifs are more well defined and less noisy.

[@santossilva]

The most popular resolution is till HD in witch we can still have visible pixels… Not everyone has 4K monitors yet.

[@feldinho]

@@santossilva 1920x1080 has more than 4x as many pixels as 800x600. Although the density is not much better, font sizes went up since because of the increased real estate. Serifs are not a big problem for fonts 16px high or bigger.

[@danielgillespie7899]

A common misconception. Research indicates that for most people there is no statistically significant difference in legibility and readability (which are not the same thing) of serif versus sans serif. The difference comes in children, people with dyslexia, people with learning difficulties, and people with some kind of visual impairment. For them there is a statistically significant difference in legibility and readability and sans serif is the clear winner. It's not a coincidence that the most well-known font designed specifically for people with dyslexia is a sans serif font (Open Dyslexia). Most people also express a preference for sans serif over serif. I would avoid serif fonts for paragraph text unless you make the text larger, increase the line-height and increase the letter-spacing. More information in a letter than is necessary to convey what the letter is is not better. Less is more when it comes to both legibility and readability. So if accessibility is an factor in your website design (that's a trick question because it is ALWAYS a factor) then you should use sans serif for paragraph text. Reserve serif fonts for headings and other larger text.

[@nadoelik]

Great talk thank you

[@MatthiasSchicker]

Wonderful talk, thank you a lot!

[@DavidHamilton5]

Very helpful👍

[@willemm9356]

23:00 I think one of the big issues here is that most developers will have an adblocker installed. So they won't be trained to ignore ads like normal users.

[@jsimmonstx]

There's this thing we have to adhere to at work called 508 Compliance which is an accessibility standard. Contrast is one of the major aspects of this.

[@Vivraan]

16:50 I not only felt dumb but just from the vast amounts of empty space I also felt as if the designer assumes people are dumb. I don't know how to feel about that.

[@SaschaRissling]

The different share icons made my brain go pooff

[@petrraisigl5454]

This was very good!

[@Kotfluegel]

This is the video I need.

[@someguyO2W]

Okay. A video directed at me!

[@DanteMishima]

Very ironic talking about readability with black on purple. I had to zoom in soo much to read your slides

[@arthurdent8086]

Well done, thx!

[@avi12]

9:23 The default text size in the browser, at least when it comes to 1rem, differs between browsers On Chromium browsers it's 16px, on Firefox it's 14px

[@feldinho]

That's not true. I just tested on Firefox 130 and it's 16px like the others. I tested unstyled text as well as text set to 1rem explicitly.

[@takeiteasyeh]

that would have been one of the good sites in 96... shiiii, it had a working table in the

[@Vivraan]

Languages with different writing systems do not necessarily benefit from these rules. However, our visual apparatuses are mostly similar. There should be a model that converges.

[@renemarot544]

It seems what is the best way to present information is also cultural depending. Do you have Chinese or Japanese or more generally non occidental studies on that ? I saw a video explaining why some Japanese web sites are full of information in the front page AND successful.

[@jacobsoreilly]

This is really important to know - this is good advice for a Western audience but may not apply globally.

[@batlin]

29:50 Nice to see that website celebrating St. Patricia's Day.

[@RodolphoArrudanogoogle]

Nice video. I learned a lot. Where that accent is from? Which part of the US?

[@mostrealtutu]

No offense, but, that congressman's website was perfectly fine. No Javascript bs.

[@GelidGanef]

😂 I think it was really just a warm up exercise. But I was thinking the same thing

[@NostraDavid2]

They could've used some better colors - that grey is too dark for a black font. Other than that, I don't see what's wrong with the old style. We're hyper-optimizing the character out of our websites. It's all bland - everyone is using the exact same style.

[@RogerValor]

@@NostraDavid2 I think that was just no background color standard interface grey from the 90s

[@DavidSaulesco]

Me too! I suspect at least a small part is nostalgia, but I also genuinely appreciate how it looked.

[@MichaelScharf]

All those minimalis UI without text designers, please go to minute 20:56

[@nexovec]

The best UX is the one you don't notice is there.

[@ukaegbugreatjnr]

So many nuggets

[@JohnLovell-FTW]

Anyone else want to help me turn these recomendations into an open source template? :)

[@edgeeffect]

Colour contrast (SO many people do this) don't put mid-grey on a dark background... don't put mid-grey on a light background! Stop using mid-contrast colours AT ALL!

[@ziglee]

After talking about font contrast she came up with slides where I can't read because it lacks contrast 🤦

[@olli1886]

At 14:35 it's surely serif for headers and sans-serif for body text, right?

[@1klap]

i disagree, serif for smaller and longer copy because it is easier to read. sans serif or even more playful font for larger font-sizes (and shorter copy) because it still is OK to read and allows to branding/creative mark

[@traveller23e]

@@1klap Though I'm not sure having a sans-serif header is creative in this day and age haha

[@turun_ambartanen]

No. The serifs form a phantom line that guides the eye and makes it easier to read. For an example take a look at the New York Times, which is presented as an example on how to do good design in this talk. Though Wikipedia (article: Serif, section: Readability and legibility) says the effect is most notable on paper and weakend when reading content on screens, or even reversed when the font is particularly small compared to the size of pixels.

[@lawrencejob]

13:30 anyone else find that title illegible?

[@mt180extras]

not quite but it would be nice anyway if it was a bit more separated from the background

[@gg-gn3re]

lings cars is straight to the point and obvious. Don't you care try to bash her site. She gets more views and is more successful than you'll ever be

[@MegaFauntleroy]

I skip the title, eventually come back to it if i didn't find what i was looking for.

[@arcan762]

StackOverflow in a nutshell

[@dinoscheidt]

The title says UX, the talk is about general accessibility aspects. For UX the number one step is to define your user group which is very hard. If you build a fashion apple website, vs an app for instagram photographers vs a magnifying glass: Your constraints are vastly different. Users with i.e. vision impairment use their own device settings… it‘s much more important to not get in the way of that (looking at you Flutter). Also culturally, things like 32:06, progressive disclosure, don‘t perform in low context cultures. Take a look at Japanese websites. As an engineer who went to self study UI-UX I am not very impressed… unfortunately.

[@kneekoo]

The title says "Basic UX for Programmers", which could've also been "Poor Man's UX" or "We have UX at home". 😆"UX" here seemed literal, as in what the user experiences when opening a web page and going through the stuff on it. So I took this presentation strictly as stuff on the surface, for people who make simple websites and lack UI/UX skills. As she put it, the point is to avoid making ugly sites, and know what the glaring issues are.

[@dinoscheidt]

@@kneekoo Well than open a Japanese website, and tell the country they use ugly websites. The talk is extremely narrow, biased and superficial for the sake to get on stage.

[@kneekoo]

@@dinoscheidt Of course it was narrow. How much meaningful information can one pack into a presentation without making people's heads explode? She made some good points about what we have to consider, and explained why. She didn't claim that her points apply to everyone across the planet. And it goes without saying that any advice related to alphabets with different glyphs would require adjustment. What was presented here works for Latin script. This presentation was fine in this regard.

[@marloelefant7500]

I'd like every character another color.

[@loldoctor]

Kennedy's page looks minimalist in comparison to some East Asian websites.

[@bobanmilisavljevic420]

🤔

[@x5queal]

It feels like the title of the talk came first to her mind and meant to be gimmicky and target programmers - I don't see how this is better than any other UX/UI introduction..

[@pjhandle]

Very interesting topic, but presented in a way that I skipped over all the boring slides with text and was at the end before I niticed. What I was expecting? Very little text. Lots of visual bad examples and good examples, with the explanation and commentary of an expert. Good luck!

[@Rx7man]

A lot of this applies to software UI/UX as well.

[@arcan762]

Websites are software, who knew?

[@maxcohen13]

The webpage of Ted Kennedy told me everything I needed to know. Does it look inviting? Not by today's standards. But maybe that's the problem; we've set our standards to unnecessary levels.

[@BrandonRatz]

@maxcohen13 which site are you referring to? I agree with the sentiment. While we over engineer our back ends we over design our front ends.

[@maxcohen13]

@@BrandonRatz 1:37

[@virtual5754]

I like how red canary representative comes with red hair. Power of branding?

[@user-gc1ky2rf3y]

I don’t think anyone with that hairstyle has the authority to determine what is ugly and what isn’t.

[@PhilSherry]

Lots of angry men in the comments here, dismissing things they don't understand because a woman is presenting them. I am shocked. SHOCKED.

[@kellyaquinastom]

? W a t ? Don't see that

[@lucielanssade6537]

Not to mention the rude comments about her appearance and her "annoying" voice. And people wonder why women don't like public speaking.

[@AnykeySkywanker]

Nice lecture, but awful vocal fry 😑

[@vardie]

Takes the piss out of a '96 site, then gives some examples of other horrendous sites while using a font that is one step away from comic sans. This is like saying a blank page is better than a page with information on it presented badly , well yes it is but still not aesthetically pleasing nor does it portray a message, it's just blah...

[@johndoe2-ns6tf]

i don't give a f about beauty. All i want from a site is a FUNCTIONAL and LIGHTWEIGHT one. That's it.

[@vadimemelin2941]

Requirements are required. Otherwise you won't sell the product

[@FutureNewsDaily]

A todo list is functional & lightweight but has very little appeal to anyone unless wrapped in good UI/UX

[@johndoe2-ns6tf]

@@FutureNewsDaily and that's how we end up with sites where a button takes seconds to respond.

[@vadimemelin2941]

@@johndoe2-ns6tf yet people use it

[@stefanalecu9532]

​And that's also how we end up with websites built by clown backend devs that come straight out of 1995 because CSS is too icky and primitive for them 🤡 ​@@johndoe2-ns6tf

[@DamjanDimitrioski]

Actually nobody reads any websites, visitors either came to see something specific (like pricing, [bus, airplane, ...] schedule, or by wrong google query). Or, they use a web application dashboard to work with from their company that they're employed by, and they don't like it most of the time.

[@bucureștioara]

meh

[@DamjanDimitrioski]

18:20 usually the image data from a web server is dynamic and not all the images in the db contain descriptions to add alternative names or labels. And adding generic label text it's redundant.

[@Des0war0ich0netAgentNoMiss]

A screenreader programm would disagree with the assumption that a text label is redundant info

[@Darkpill-2]

A label for every icon is a great idea if you’re building an app for kindergarteners.

[@stevegrantz9141]

Even if you truly believe that, it is a good reminder that icons are a potential place where a user may not be able to complete the journey. You may want to take a good look at usage - you may have people behaving like kindergarteners.

[@Darkpill-2]

@@stevegrantz9141 What you or the speaker don’t realize is that icons where around long before the internet. Warning labels, road signs - heck - even emergency exit signs had their label removed for an icon! The reality is icons do require users to do their own research.

[@eduardom800]

Masterclases turn out to be all the same. much blah blah. I found my key points and spent less 20 minutes on this video. Wasn't expecting a full bulleted powerpoint... you can rescue some good information though, just some. A bit disapointed.

[@timbosplice8437]

You can spend 1 minute reading the plot on Wikipedia instead of watching a two hour movie. Some ppl like a slower more relaxed delivery. Its not a fair ding that you personally don’t like that style

[@KAZVorpal]

At the very beginning of this video, after claiming she's going to tell us how to make a not-ugly website, she shows us her website, which is absolutely hideous.

[@bigruckus45]

That's just a slide in the presentation. She doesn't say anything about that being modeled after her website.

[@KAZVorpal]

@@bigruckus45 Yes, but if that's her website, she is incompetent to tell anyone else how to build theirs.

[@arcan762]

She looks exactly what I expect a UI/UX consultant to look like... 😶

[@HerbieBancock]

When you can't make anything else not ugly might as well focus on programmers' websites.

[@seancharles1595]

Had to turn the volume down. I have issues with vocal fry but good stuff in it.

[@PejmanMan]

Ah, so these are the people why I hate websites and everything feels indistinguishable from another. I promise you, lack of differentiability will become an issue shown in studies with regards to retention. When everything looks the same we don’t remember as well, nor remember what website we got that information on.

[@authenticallysuperficial9874]

I hate UX

[@CyberTechBits]

How to not make yourself look ugly 😮

[@isachellstrom8467]

hm no

[@harsimran1]

How to Make Your Presentation 100x More Engaging and Keep Your Audience Hooked: The Simple Fix-Ditch the Vocal Fry!

[@glader88]

When going through the website at 16:23 I expected her to go "My god, it even has a watermark" at some point 😄

[@dottorcosmic]

This is gold. Made with a sexy voice