6 ms·

Show HN: I made a book with a hundred UI/UX tips

198 points by Akcium 5y ago

Hello. This year I dived into UI/UX area and at the same time I work as a web developer. I sincerely love making good UI. But at my full time job it's not always possible due to different reasons =\ So I've been posting random UI/UX staff on Twitter, then I made a free book that had 50 tips (posted it here as well). I decided to finish this year by collecting everything I learned and here it is: https://akcium.gumroad.com/l/ui-ux-tips https://akcium.gumroad.com/l/ui-ux-tips. This time it's a paid one. But, you can check ~20 pages of it, just go to https://akcium.gumroad.com/l/ui-ux-tips-sample https://akcium.gumroad.com/l/ui-ux-tips-sample, put 0 in the price and download it for free. I tried to illustrate almost every tip and provide some additional links. This is especially useful for devs and founders who cannot afford a designer or just want to make their UI look decent.

Timwi 5y ago
Great work, but I vehemently disagree with the section on animations. Long animations that keep me waiting and prevent me from continuing my next input are a great source of frustration. It is more important for users who use your system often to be able to do so quickly than for it to “look pretty” but constantly swallow inputs and not do what I told it to do.
crispyalmond 5y ago
Pretty cool! It's nice having these in one place.
- Akcium 5y ago
  Thank you! yeah, I was collecting them from different .sketch files, tweets etc :)
Noumenon72 5y ago
I bookmarked several of your tweets, thanks for what you gave for free and I hope you can monetize it some.
- Akcium 5y ago
  Yeah, well, it's not a big deal after all. I've just thought that the idea is not that these tips are secret knowledge after all. Just wanted to finish this year with something more or less decent, and in the next year I'll keep on researching this area
helsontaveras18 5y ago
I just bought it! I’ve always wanted a book that clearly lays out good UI tips.
- Akcium 5y ago
  Thank you!
deleted 5y ago
[deleted]
lulzx 5y ago
Amazing work, just bought
- Akcium 5y ago
  Thank you!
finger 5y ago
Unless it is on purpose, then I think you have a typo in the afterword section. Afterward > Afterword.
- Akcium 5y ago
  Oh thank you, English is not my native language. Didn't know that there are two words, afterward and afterword =\
leshenka 5y ago
Purchase screen has a weird UX bug: three fields(expiry, full name, CV code) go in different order when navigated via tab button. Wonder if this is intentional
- KronisLV 5y ago
  That's probably an issue that Gumroad, the marketplace, should handle. Not sure whether they have any official ways to submit bugs, but there's this: https://help.gumroad.com/article/20-how-do-i-contact-gumroad https://help.gumroad.com/article/20-how-do-i-contact-gumroad I can't think of a reason why altering the field navigation order would be done intentionally - bots and such should be able to just access fields by IDs/CSS selectors anyways. Personally, i just looked at the free sample download requiring giving them my contact information (probably their way of delivering the products) and decided not to bother with that. In contrast, sites like itch.io (focused more on interactive content/video games and such) absolutely nails that part - free content can just be downloaded directly.
  - troysk 5y ago
    One needs to add "tabindex" in HTML if one wants to control the flow of tabs.
  - Akcium 5y ago
    I've just realized that I actually get emails of people who get the free sample. Well, technically I have a collection of emails right now, but I didn't mean to do it =\ Hm, maybe I can disable it. But you can just put a random email, I believe that it'll be downloaded right away, apart from sending a link to an email. So yeah, I've just seen the emails and some of them are random, non-real emails
schleck8 5y ago
I know you, I'm subscribed to your Newsletter. It's very useful. On a different note, congrats to Gumroad for joining the Generic SaaS Landing Page club
- Akcium 5y ago
  Thank you! :) It feels so nice when you hear "I know you". Next year I'll improve the quality of my newsletter, since I haven't had much time to work on it recently =\
agumonkey 5y ago
OP have you heard of communication complexity ? if so, do you apply that to UI ?
poniko 5y ago
Nothing new for me personally, but very nice job, simple and well descibed.
reitzensteinm 5y ago
It was definitely worth checking out! Thanks for sharing. This page from the sample is a little ironic: https://imgur.com/QIma7Ua https://imgur.com/QIma7Ua
- lifeisgood99 5y ago
  I'm missing the irony. Isn't the point that you need the arrows from the example on the right?
  - deleted 5y ago
    [deleted]
  - morder 5y ago
    Because the colors on the top of each box indicate which are bad and good. Red for bad and green for good. But if you're color-blind (or on a b&w ereader) you can't see the distinction and have no idea which is the right one at a glance and this section is specifically about not using only colors to indicate information.
- Eduard 5y ago
  Took me a moment to understand what's ironic, then I got it: the page discusses to use other visual (and also important, accessible text!) hints which don't solely rely on color, to convey information, besides purely color-coded information. But then, the book uses solely the colors red and green to visually convey bad and good examples. The meta-irony here is that reitzensteinm's imgur image cannot be understood by any visually-impaired person ;)
  - reitzensteinm 5y ago
    Oh wow. I wanted to be a bit vague so people had fun catching it. The meta irony didn't remotely occur to me. That made my morning, thank you!
    - Jugurtha 5y ago
whiddershins 5y ago
Downloaded the first free 20 and they were quite good.
morder 5y ago
Purchased and put it on my e-reader. Still looks great in black & white. Thanks for this. I'm sure I'll get some good info and hope I am able to learn/integrate this knowledge into my projects.
tchock23 5y ago
These are great. There is one tip from the free sample I disagree with - ‘Empty/Loading States.’ It’s better to teach users early on where the ‘add a new thing’ button will be. Your example uses a credit card so maybe not an issue there, but if you need users to click that ‘add new’ button often then it’s best to show where it is normally going to be.
- tchock23 5y ago
  Downvotes HN? Was trying to provide some value in this comment. Would be helpful to know why that wasn’t seen as valuable relative to the other comments here that generically thank OP for posting… I should add that I used to run a usability consulting firm so my suggestion came from having personally conducted over 1k usability interviews early in my career.
meristem 5y ago
Hi there! I saw the free tips; does the full book use an added way besides the red/green bars to denote "do not do this" and "do this"? Red/green with no other iconography are confusing for color-blind people.
- newsbinator 5y ago
  One of the tips among the free pages of the book is to avoid red/green for differentiation because it's confusing for color-blind people.
vort3 5y ago
Instead of downloading a PDF, maybe you could post first 20 samples as a static site, blogpost, or whatever?

198 points by Akcium 5y ago

Timwi 5y ago

Great work, but I vehemently disagree with the section on animations. Long animations that keep me waiting and prevent me from continuing my next input are a great source of frustration. It is more important for users who use your system often to be able to do so quickly than for it to “look pretty” but constantly swallow inputs and not do what I told it to do.

crispyalmond 5y ago

Pretty cool! It's nice having these in one place.

Akcium 5y ago
Thank you! yeah, I was collecting them from different .sketch files, tweets etc :)

Noumenon72 5y ago

I bookmarked several of your tweets, thanks for what you gave for free and I hope you can monetize it some.

Akcium 5y ago
Yeah, well, it's not a big deal after all. I've just thought that the idea is not that these tips are secret knowledge after all. Just wanted to finish this year with something more or less decent, and in the next year I'll keep on researching this area

helsontaveras18 5y ago

I just bought it! I’ve always wanted a book that clearly lays out good UI tips.

Akcium 5y ago
Thank you!

deleted 5y ago

[deleted]

lulzx 5y ago

Amazing work, just bought

Akcium 5y ago
Thank you!

finger 5y ago

Unless it is on purpose, then I think you have a typo in the afterword section. Afterward > Afterword.

Akcium 5y ago
Oh thank you, English is not my native language. Didn't know that there are two words, afterward and afterword =\

leshenka 5y ago

Purchase screen has a weird UX bug: three fields(expiry, full name, CV code) go in different order when navigated via tab button. Wonder if this is intentional

KronisLV 5y ago
That's probably an issue that Gumroad, the marketplace, should handle. Not sure whether they have any official ways to submit bugs, but there's this: https://help.gumroad.com/article/20-how-do-i-contact-gumroad https://help.gumroad.com/article/20-how-do-i-contact-gumroad I can't think of a reason why altering the field navigation order would be done intentionally - bots and such should be able to just access fields by IDs/CSS selectors anyways. Personally, i just looked at the free sample download requiring giving them my contact information (probably their way of delivering the products) and decided not to bother with that. In contrast, sites like itch.io (focused more on interactive content/video games and such) absolutely nails that part - free content can just be downloaded directly.
- troysk 5y ago
  One needs to add "tabindex" in HTML if one wants to control the flow of tabs.
- Akcium 5y ago
  I've just realized that I actually get emails of people who get the free sample. Well, technically I have a collection of emails right now, but I didn't mean to do it =\ Hm, maybe I can disable it. But you can just put a random email, I believe that it'll be downloaded right away, apart from sending a link to an email. So yeah, I've just seen the emails and some of them are random, non-real emails

schleck8 5y ago

I know you, I'm subscribed to your Newsletter. It's very useful. On a different note, congrats to Gumroad for joining the Generic SaaS Landing Page club

Akcium 5y ago
Thank you! :) It feels so nice when you hear "I know you". Next year I'll improve the quality of my newsletter, since I haven't had much time to work on it recently =\

agumonkey 5y ago

OP have you heard of communication complexity ? if so, do you apply that to UI ?

poniko 5y ago

Nothing new for me personally, but very nice job, simple and well descibed.

reitzensteinm 5y ago

It was definitely worth checking out! Thanks for sharing. This page from the sample is a little ironic: https://imgur.com/QIma7Ua https://imgur.com/QIma7Ua

lifeisgood99 5y ago
I'm missing the irony. Isn't the point that you need the arrows from the example on the right?
- deleted 5y ago
  [deleted]
- morder 5y ago
  Because the colors on the top of each box indicate which are bad and good. Red for bad and green for good. But if you're color-blind (or on a b&w ereader) you can't see the distinction and have no idea which is the right one at a glance and this section is specifically about not using only colors to indicate information.
Eduard 5y ago
Took me a moment to understand what's ironic, then I got it: the page discusses to use other visual (and also important, accessible text!) hints which don't solely rely on color, to convey information, besides purely color-coded information. But then, the book uses solely the colors red and green to visually convey bad and good examples. The meta-irony here is that reitzensteinm's imgur image cannot be understood by any visually-impaired person ;)
- reitzensteinm 5y ago
  Oh wow. I wanted to be a bit vague so people had fun catching it. The meta irony didn't remotely occur to me. That made my morning, thank you!
  - Jugurtha 5y ago

whiddershins 5y ago

Downloaded the first free 20 and they were quite good.

morder 5y ago

Purchased and put it on my e-reader. Still looks great in black & white. Thanks for this. I'm sure I'll get some good info and hope I am able to learn/integrate this knowledge into my projects.

tchock23 5y ago

These are great. There is one tip from the free sample I disagree with - ‘Empty/Loading States.’ It’s better to teach users early on where the ‘add a new thing’ button will be. Your example uses a credit card so maybe not an issue there, but if you need users to click that ‘add new’ button often then it’s best to show where it is normally going to be.

tchock23 5y ago
Downvotes HN? Was trying to provide some value in this comment. Would be helpful to know why that wasn’t seen as valuable relative to the other comments here that generically thank OP for posting… I should add that I used to run a usability consulting firm so my suggestion came from having personally conducted over 1k usability interviews early in my career.

meristem 5y ago

Hi there! I saw the free tips; does the full book use an added way besides the red/green bars to denote "do not do this" and "do this"? Red/green with no other iconography are confusing for color-blind people.

newsbinator 5y ago
One of the tips among the free pages of the book is to avoid red/green for differentiation because it's confusing for color-blind people.

vort3 5y ago

Instead of downloading a PDF, maybe you could post first 20 samples as a static site, blogpost, or whatever?