Show HN: I made a book with a hundred UI/UX tips | Hacker News Reader

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

198 pointsAkcium32 comments

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.

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, 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.

View on HN

It was definitely worth checking out! Thanks for sharing.

This page from the sample is a little ironic:

https://imgur.com/QIma7Ua

I'm missing the irony. Isn't the point that you need the arrows from the example on the right?

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.

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 ;)

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!

One delightful HN moment! :D

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.

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.

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.

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.

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

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

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.

One needs to add "tabindex" in HTML if one wants to control the flow of tabs.

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

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.

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

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 =\

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

Afterward > Afterword.

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

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

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

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

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

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

Thank you!

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.

Downloaded the first free 20 and they were quite good.

Amazing work, just bought

Thank you!

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

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

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

Reply on news.ycombinator.com