[HN Gopher] Rules for developers to design beautiful UIs without...
___________________________________________________________________
Rules for developers to design beautiful UIs without a designer
Author : miraantabrez
Score : 195 points
Date : 2023-04-11 18:31 UTC (4 hours ago)
(HTM) web link (www.refactoringui.com)
(TXT) w3m dump (www.refactoringui.com)
| owlbynight wrote:
| Skeleton UI (Svelte + Tailwind) is how I go about it. The
| developer experience is very good. As for the UX, that's mostly
| just a matter of actually thinking about how people will use the
| app and taking the time to account for it.
|
| In my experience, bad UIs are a product of laziness more than
| know-how.
| hoofhearted wrote:
| I'm not sure if you realized it or not, but Steve and Adam
| created this book and then went on to create Tailwind CSS
| shortly after.
| kmarc wrote:
| > just a matter of actually thinking about how people will use
| the app
|
| What I learned during my professional career is that this is
| exactly what 80% of engineers are absolutely incapable of. Do
| belong to the 20% and hit the jackpot.
| justeleblanc wrote:
| You've basically just answered "with a brush" to the question
| "how do you think I should paint my wall". True, but
| irrelevant. You can make a ugly, unusable UIs with your listed
| frameworks. You can make amazing, smooth UIs with plain
| HTML+CSS.
| chankstein38 wrote:
| Honestly their first concrete example, with fewer borders, is
| something that bothers me a lot on the internet today. Cool
| everything looks flat and like part of everything else. That's
| not hard to go down through a giant list of or anything... /s
| jasmer wrote:
| It's a bad first example admittedly because it seems very
| aesthetic, frankly, the borders may theoretically make good UI.
|
| Most workers today don't remember the old Windows forms: they
| were good UI. Just ugly.
|
| In fact, those 'Windows Forms' were also _fast_ - it was back
| in the days when almost everything was fast.
| chankstein38 wrote:
| I miss those days... Everything now takes countable seconds
| to load or do anything... I'm running a 3090 with a decent
| processor, and 32GB of RAM yet even some of the simplest
| things take so long anymore.
|
| I miss those ugly forms days specifically too haha I
| personally prefer UX over any amount of design so I remember
| being so disappointed when Microsoft started introducing
| everyone to the concept of flat layouts that don't
| differentiate sections and just generally don't even look
| conceptually usable half the time. Give me ugly fast forms
| over looks any day.
| munk-a wrote:
| It's also important to contrast the information density. Both
| the "bad" and "good" examples are quite readable but the one on
| the left is going to be more useful for larger lists of things.
| IMTDb wrote:
| To be fair, the course is about designing beautiful UIs, not
| necessarily useful ones. Wether that is actually desirable is
| up to you.
| munk-a wrote:
| When I think of a beautiful UI I think of something that's
| aesthetically pleasing while being highly functional and
| clear to read.
| layer8 wrote:
| "Beautiful" has become a scare word for me.
| 411111111111111 wrote:
| The goal was beautiful design, not good usability.
|
| You gotta admit that it looks good, and eye candy is usually
| extremely effective for user retention, even if the alternative
| handles better, technically.
| tmtvl wrote:
| > _You gotta admit that it looks good_
|
| I don't have to, and I'm not going to because it looks like
| crap. Why is "Cancel" just a word instead of a button? And
| while "Invite" is marginally better, a rounded rectangle is
| not much of a button either and doesn't immediately signify
| "oh, I can click this".
|
| I know some people prefer flat and featureless design (and
| there are jokes we could make about that), but that is very
| personal and tastes can vary widely.
|
| Though in the interests of fairness I will admit that there
| are people who do feel that kind of thing looks good.
| waldothedog wrote:
| What would "immediately" signify the ability to be clicked?
|
| And to whom would this sign have such a meaning?
| wruza wrote:
| To anyone?
|
| Everyone knows how a button looks, and in case you're
| sure that _that_ is a button, I invite you to explain
| every flat ui to my older relatives, using only words.
| tmtvl wrote:
| Styling to make it look like a button which is jutting
| out would signify the option for interaction to anyone
| who's ever seen a device with physical buttons, like a
| keyboard, smartphone, television, remote control,...
| wizofaus wrote:
| That problem exists in both versions though - i.e. making
| it more "beautiful" hasn't obviously affected the
| usability. But I can see at least one way in which it could
| - if shown on a wide screen and there were a lot of
| entries, matching up the "Team"/"Member" signifier with the
| contact name would be quite challenging. The lines in the
| orginal version may look a little clunky but do serve a
| purpose.
| chankstein38 wrote:
| I have trouble distinguishing the two as an unusable design
| is usually automatically worse for me but you're not wrong in
| making the distinction that they specified beautiful. I guess
| I wish people would choose functional/usable over beautiful
| or merge them in a way that doesn't sacrifice the one I find
| more important!
|
| To be fair, I also just generally don't like the look of it
| without borders and stuff.
| bufio wrote:
| It looks like bog standard webshit.
| munk-a wrote:
| Good usability is beautiful. Valuing aesthetics over
| functionality is ugly.
| nextaccountic wrote:
| I think you could apply their principles to add centered grayed
| dividers between the lines that don't go through the entire
| width of each row, maybe 80% or so
|
| This or just alternating the background of each row between
| light and slightly darker colors
| asoneth wrote:
| Most products don't need a whole book:
|
| 1) Use a mature, well-designed GUI framework. Especially if you
| don't have a designer it's unlikely that novel interactions or an
| unusual visual design will be a key selling point for your
| product.
|
| 2) Find a half-dozen folks from your target user audience or
| proxies who are as similar as possible. Give them a task to do
| with your product/prototype while you watch. Let them talk aloud
| without interrupting. Do this early and often.
|
| If you can do those two things you will be ahead of most consumer
| products and vastly ahead of most enterprise products.
| joebiden2 wrote:
| 3) don't reply to threads obviously created with the intention
| of promoting some costly product, promising to surpass
| specialized knowledge, just by spending a few bucks.
| chillbill wrote:
| Looking at the first example given I think this book is the one
| missing the mark. I genuinely have trouble when things have less
| borders! I don't care about things designed to seem nice, I want
| them to be usable!
| [deleted]
| csdvrx wrote:
| OTOH, I'm using full screen apps without decorations, and I'm
| fighting with edge to forcefully remove all the scrollbars on
| every website automatically (I want 0 scrollbar unless I'm
| actively scrolling)
|
| different tastes for different people
| david422 wrote:
| > (I want 0 scrollbar unless I'm actively scrolling)
|
| How do you know when there is content to scroll then? You
| randomly scroll parts of the screen to see if they move?
| csdvrx wrote:
| > How do you know when there is content to scroll then? You
| randomly scroll parts of the screen to see if they move?
|
| Sometimes, but more often I press on page down to read more
| content until there's no more content to read, so having
| scrollbar is pointless: it eats screen real estate without
| providing anything in return
| TapamN wrote:
| I loathe things "magically" disappearing and reappearing.
| I want a predictable, consistent interface. I can work
| faster when things are consistent. Scrollbars, besides
| allowing me to jump around in a document, give me an
| indication of where I am on the page. When I ask, "How
| much of this page/window/document is left? About where am
| I in it?" (a common question) the answer should be RIGHT
| THERE and not unhelpfully hidden/unavailable or difficult
| to see. I shouldn't have to waste time fighting to find
| out.
| augustk wrote:
| Indeed. In the "correct" version the search field looks almost
| like a highlighted item in the list. With many modern user
| interfaces you really need to be trained in the current
| conventions to see which elements you can interact with.
| Compare this with the typical unstyled HTML.
| thelogicguy wrote:
| I think this is probably somewhat a pitfall of using this
| example as a lead.
|
| Design rules like "fewer borders are better" don't tell the
| story well, but they're easy to teach people. It's harder and
| less grabby to say something like:
|
| Over reliance on borders to separate types of content can lead
| to designs where contrast between elements is too sharp and
| it's harder to read through information. Designers should have
| a sense for information hierarchy and follow that through in
| their application. Have a point of view and use the visual
| design to express that. Tools you can use to create that
| hierarchy are things like borders, shadows, fills, scale, and
| space. Using all in concert, you can make a design that feels
| harmonious, but also allows users to freely navigate through
| the interface.
|
| That advice is probably harder to grok, and isn't as punchy
| because it can't be used as a simple diagnostic (do we have
| fewer borders?), but it is realistic.
| gretch wrote:
| It seems like this page/preview conflates interaction design
| with aesthetic/cosmetic design.
|
| Interaction design is like "which buttons even exist?", "should
| this input be represented by a radio or a drop down?", what is
| the navigation hierarchy?
|
| You won't automatically be good at interactions even if your
| sense of aesthetic is good.
| ssgodderidge wrote:
| I get where you're coming from, but I don't think they are
| saying to _never_ use borders, but instead use them
| intentionally. They explain better than "Use less borders"
| below:
|
| > Borders are a great way to distinguish two elements from one
| another, but using too many of them can make your design feel
| busy and cluttered
|
| The example screenshot on the page shows a use case where they
| want to highlight a single row from a table, and using less
| borders is great for that. However, if they were trying to
| increase readability of the table overall, they may choose to
| keep the borders in place for contrast.
| wruza wrote:
| They used the same type of border over the first example, of
| course it doesn't work. It's "our genius design vs average
| nonexistent nonsense" type of move. Make table/list grid less
| pronounced, make the selection hint more saturated than a
| field bg, and now it looks better than #2.
|
| Their selection looks like a hover hint in both cases as if
| they were afraid to tell a user that a row may have a
| selection on it.
| BiteCode_dev wrote:
| Same, I really prefer the design on the left. Easier to see
| things, and it makes you feel you can click on elements.
| karaterobot wrote:
| As a designer (and former developer) my objection to this is
| semantic. It's not possible to design beautiful UIs without a
| designer. The reason is: the designer was you all along. If you
| are doing design, even half-heartedly, _even without knowing it_
| , you are the designer.
|
| The relevant questions when it comes to "beautiful UI" are: do
| you give a shit, and do you have the skill to execute on giving a
| shit. Most people don't, thus the profession.
|
| This book seems to assume the former is true, and wants to give
| some quick tips on how you can fake the latter. I'm skeptical of
| this approach, in the same way I'd be skeptical of someone who
| said "here are 10 tips to make a good program without learning to
| program". Skeptical, not offended.
|
| I'm interpreting the word "beautiful" generously. Beautiful in
| the same way an equation or algorithm can be beautiful: not just
| -- or even primarily -- esthetic, but beautiful in the sense of
| doing what it's meant to do about as well as can be done. Beauty,
| truth; truth, beauty, etc.
|
| Design is very interesting. I always saw it as a part of
| engineering: both are interested in finding the optimal solution
| given a set of constraints and requirements. The tool chain is
| different, granted. To me, it's fun, and not something I'd want
| to skip over. See giving a shit, above.
| clumsysmurf wrote:
| Often the bad designs come from the designers themselves. Just as
| software developers often fall prey to "NIH", many designers feel
| the established design systems like Material are insufficient for
| some reason. That is OK, if you know the rules you can break
| them, but often they don't know the rules either (grid system,
| typography, color for accessibility) and want to make "their own
| mark" with some new creation that is highly idiosyncratic. This
| doesn't help much, but as in software, it seems to come down to
| "taste" which is nebulous.
|
| In the landing page for this book, there is an example of good
| (right) / bad(left) design. I have seen designers simply not know
| what to do with empty space, so they had to fill it with
| dividers, outlines, and doodads like the left design.
|
| I'd like to hear any strategy one has to deal with that. I have
| taken up Figma and Sketch so I can meet them "where they are" but
| still, plenty of disagreements can happen.
| drBonkers wrote:
| > Just as software developers often fall prey to "NIH"
|
| What does NIH abbreviate?
| AgentOrange1234 wrote:
| Not invented here, probably?
| gdprrrr wrote:
| Not invented here
| unsupp0rted wrote:
| Not invented here (I.e. if we didn't make it then it's either
| bad or bad for our use case).
| augustk wrote:
| https://en.wikipedia.org/wiki/Not_invented_here
| asoneth wrote:
| I think you deal with bad designers the same way you deal with
| bad developers.
|
| Try not to hire them in the first place, fire them if you can,
| and if you're stuck with them try to make sure they are
| occupied with tasks that will not cause too much overall
| damage.
| pelagic_sky wrote:
| The horror stories I hear are usually when a Graphic Designer
| is given the role of a UX/UI designer. There is nothing that
| is going to quickly fix that situation other than getting
| them some much needed education and mentorship.
| 23B1 wrote:
| The solution is to hire better designers, unfortunately.
| Savvy/wise/experienced ones know when to follow the rules, and
| when to break them.
|
| Edit: That might not seem like the most helpful advice, and I'm
| sorry you have to deal with this - but it's the most effective,
| without having to write an entire book.
|
| This book was written for industrial designers by an industrial
| designer, but I did find a lot of useful advice in here _for_
| designers on understanding the business mind, deferring to
| clients, embracing constraints and requirements, etc.
|
| https://www.amazon.com/Designers-Are-Wankers-Neville-Brody/d...
| izacus wrote:
| Honestly, I'd just once like to work with a designer that has
| heard of words longer than 5 letters.
|
| Every. Single. Darn. Design I get completely ignores the fact
| that the texts inside them won't be built from nice little
| short words with EXACTLY the correct letter counts (especially
| when localized).
|
| Which results in shit UIs like one I've just seen on Android
| where (in my language) the button literally just says "Tap
| to..." and every single label on a button is truncated and
| doesn't finish a word.
| jstarfish wrote:
| > Honestly, I'd just once like to work with a designer that
| has heard of words longer than 5 letters.
|
| I blame _lorem ipsum_. And Latin.
| pelagic_sky wrote:
| You need to work with designers who are used to supporting
| localization. Try making a UI using Deutsch and tell me about
| spacing issues. :D
| astrospective wrote:
| When I was a tester first thing I'd do was fill every text
| box with Ws just to see what ran over. Good to remember as a
| dev now.
| throwway120385 wrote:
| I don't have any strategies, but I've had designers also want
| to add unnecessary steps to a gui-driven process. One designer
| kept arguing about the cognitive load of having a user simply
| insert their credit card into the reader to signal intent to
| pay. They wanted a flow where the user would touch the UI to
| indicate whether they wanted to tap or insert or scan a coupon.
| There was no reason to do it that way. I don't want to get into
| the specifics but it's a flow everyone uses every day without
| thinking and we were adding a new input device. It's not like
| we were inventing an entirely new system. The designer just
| wanted to make the work more than it was.
| nobody9999 wrote:
| >It's not like we were inventing an entirely new system. The
| designer just wanted to make the work more than it was.
|
| Which is a good reason why fixed-price contracts make more
| sense in this context than a time and materials contract.
|
| How does the old saw[0] go again? It Is
| Difficult to Get a Man to Understand Something When
| His Salary Depends Upon His Not Understanding It
|
| [0] https://quoteinvestigator.com/2017/11/30/salary/
|
| Edit: Fixed formatting.
| JusticeJuice wrote:
| This could be tested with usability studies and a good user
| researcher. Make a prototype of the 'fast' way, and the
| 'lower cognitive load' way. Try it with 15 people per
| prototype, track metrics, and ask people about the experience
| afterwards. Make sure everyone on the team has an open mind
| and see what sticks.
| iudqnolq wrote:
| I hate that specific issue.
|
| Do not ask me if I want to tap a contactless card or insert
| my card. I'll do one or the other and then you'll know what I
| want.
|
| I call this dropdown-driven-design. "Our UI builder tool had
| this option, so we have to use it".
| JusticeJuice wrote:
| Design is a field where there's no clear 'correct' answer, in a
| vast sea of opinions. Honestly UI design is surprsingly tame
| compared to other areas of design (interior, architecture,
| typography etc). If there's a uni near you, try go to a design
| critique where work is presented and discussed - it's intense.
| Debating work is a big part of being a designer.
|
| Strategies to deal with disagreements, frankly a big part of it
| is being comfortable disagreeing. If you want to get more into
| design, know they're going to happen, and that there's not a
| clear answer, and it's not personal. A good designer should
| know it's about the work and the idea not where or who it came
| from. Source: am a UI designer.
| gspencley wrote:
| One of my pet peeves in software development is not doing
| enough upfront R&D into feature and product design. User
| feedback is often only collected after the feature has
| shipped, landed and users are forced to deal with the
| "upgrade."
|
| It's hard to take subjective matters, such as UI preferences,
| and draw objective conclusions from them ... but it can at
| least be done in the aggregate. Before "SaaS" took over
| software (and made modern computing mostly unappealing to me
| as an end-user), companies would have to spend quite a bit of
| resources doing focus groups and "beta testing" before that
| big product release. End users could be divided into the
| "early adopters" and the "review watchers", the latter group
| choosing to wait and decide whether or not it's worth
| "upgrading."
|
| There is no reason that feature and product design in
| software can't go through an R&D phase except for cost. It's
| often cheaper to do your R&D in-house even though it often
| misses the mark because "real" customers rarely use a product
| like those who are intimately familiar with all of its quirks
| and oddities.
|
| So, while you're correct that accessibility, usability and
| aesthetics will often vary from individual to individual ...
| I still think that companies could arrive at an objectively
| "right", or at least "best" design if they bothered to do
| more upfront R&D; soliciting user feedback and data from
| "real" end users very early on in the design and development
| process. Doesn't mean you will please everyone, but you can
| at least maximize the number of end users who are satisfied.
| JusticeJuice wrote:
| Hard agree. I've worked with specialised user researchers
| before and holy shit they're good. I've never ever once
| thought doing research was a waste of time. It's so worth
| the money.
|
| It's just really easy to get trapped in your own biases -
| often the bias of "This isn't that complicated, I
| understand it so the customer can too", and the "I know
| what they want" one. So in the face of 'we need to deliver
| fast', a lot of people won't take the time to invest in it.
|
| If anyones interested in research methods, highly reccomend
| this book.
|
| https://www.amazon.com/Universal-Methods-Design-
| Innovative-E...
| illiarian wrote:
| > many designers feel the established design systems like
| Material are insufficient for some reason
|
| Because Material is awful?
|
| In their original iteration they had to do a study with 600
| people to find out that text inputs should look like text
| inputs https://medium.com/google-design/the-evolution-of-
| material-d...
|
| Their latest abomination has almost nothing aligned optically:
| https://twitter.com/dmitriid/status/1643607965935476737 When
| there are 5 elements, they follow 5 different guidelines:
| https://twitter.com/dmitriid/status/1643682248959328258
|
| > That is OK, if you know the rules you can break them, but
| often they don't know the rules either
|
| And that's the problem with what I call "dribbble-raised
| designers" ("designers" of Material UI included): they work for
| the designs to look nice in static screenshots on presentation
| pages without much scrutiny, and that's it.
| illiarian wrote:
| On that note: you can't even imagine how bad Material UI is h
| ttps://twitter.com/nikitonsky/status/1645797661684170754?s=..
| . and https://twitter.com/nikitonsky/status/16436131441435197
| 44?s=...
| deckard1 wrote:
| > not know what to do with empty space
|
| every PM everywhere. They simply cannot leave good enough
| alone.
|
| Eventually every site A/B tests its way until it becomes Reddit
| mobile site. No one asked for carousels but sites continue to
| use them. We are getting inundated with popups today. I don't
| want to say it's as bad as 1990s flash ad popups. But it's
| getting damn close now. Bullshit cookie popups. "This site is
| better on our mobile app" crap popups. Google sign in popup
| bullshit.[1]
|
| I would say anti-UX and anti-accessibility is very much the
| point of many sites. "Dark patterns" help conversion and the
| bottom line. Every site you visit is engaged in psychological
| warfare with you.
|
| [1] https://support.google.com/accounts/thread/174978821/stop-
| th...
| wolpoli wrote:
| Thanks for posting the steps to turn off the Google Sign-in
| popup. It's annoying that it's buried through.
| codedokode wrote:
| Google popup is one of the worst, it often covers useful
| content, the only one that is worse is full-screen "give us
| your email" popup.
| gwbas1c wrote:
| $100 for a book is steep, especially when it's a pdf.
| chankstein38 wrote:
| A pdf that seems to contain "high quality" examples like "use
| fewer borders" where the example made several commenters,
| including myself, say "That's worse." Not sure why I'd pay $100
| for a PDF anyway but I'm sure as heck not doing it when the
| kind of advice breeds less usable pages.
| joebiden2 wrote:
| It's really hard to take the HN guidelines here at face
| value. It's hard to suppress the thought that this has been
| upvoted by a SEO-bot army.
| chankstein38 wrote:
| agreed 100%
| test1235 wrote:
| how is this not just an advert? I don't get it.
| Bishonen88 wrote:
| That's a 4+ years old book, too.
| hulitu wrote:
| > Use fewer borders.
|
| > Borders are a great way to distinguish two elements from one
| another, but using too many of them can make your design feel
| busy and cluttered
|
| Of course. Who needs to know where a GUI element starts and where
| it ends ? Why not click everything until you discover that the
| label on the lower left has an action assigned to it. /s
|
| A very long time ago there was something called "Style guide".
| But who needs such outdated staff anymore ?
| samhuk wrote:
| This could perhaps come off as excessively brutal, but it really
| is just my true experience in the industry - the worst UIs I have
| seen (both in terms of UX quality and internal code quality) have
| been made by that particular kind of developer has has never
| bothered to go a single inch outside of their little Java/C# box
| that they were given by their CS undergraduate course, and then,
| due to some reason like the company doesn't want to hire or move
| devs around, becomes the senior lead on some big UI piece.
|
| The things I have seen...
|
| Personally, I think that creating great UIs is not something that
| can be taught overnight. There is a certain kind of "feel for it"
| that I think that I have gained through my years of making them;
| something that I feel like cannot be taught, at least not in some
| "bootcamp"/"crash-course" way.
| drewbeck wrote:
| > There is a certain kind of "feel for it"
|
| I definitely agree with this and I think it partly comes down
| to the fact that product design is always a negotiation between
| many concerns - all the interface pieces on the view, patterns
| across views, user expectations, user research, dev LOE, etc.
| etc. In many ways it's the art of the possible; I say UX is
| harm reduction b/c there's never a perfect solution for any
| problem. Work like this is very subjective and always a lot
| about "feel".
| andsoitis wrote:
| Building great UI is much more than visualization. It is much
| more than throwing things into a template. It is much more than
| making something pretty.
| codybontecou wrote:
| I've read this book cover-to-cover and learned a ton of
| actionable advice so I recommend it.
|
| My only complaint is that they don't offer a physical book.
| jasmer wrote:
| This is Design not UX also you can actually get quite far by
| following those 'rules' you still want to have the meta issues
| sorted out first before getting to the tweaks. But yes, the
| notion of practice over art actually does apply - you can make
| things better in a pedantic way.
| kungfufrog wrote:
| I must be a philistine because with the primary example used on
| the landing page I actually prefer the bordered version. It seems
| clearer/cleaner to me. Maybe it's a vestige of growing up in the
| 90's writing Access applications on the side for dosh when I was
| a teenager?
| Rodeoclash wrote:
| I thought the same thing. As ugly as all those "WinForms"-esque
| 90s applications were, they presented dense amounts of
| information in a usable way, provided you had time to learn the
| application.
| pxoe wrote:
| HN has native ads now?
| aeze wrote:
| When it comes to design, I find organizing and structuring
| content particularly challenging compared to things like font
| size, spacing and color choice.
|
| eg. Given a list of items to display - should I create a grid of
| cards, a list, or a table? I feel like you could do any of them,
| but they have different trade-offs that I can't really
| articulate.
|
| Does this book provide guidance on stuff like that? If not, are
| there other resources out there?
| xk_id wrote:
| This book has been posted on hn before and it's worth reposting.
| Highly recommended as a pragmatic and comprehensive guide for
| principles of UI design. Note that it doesn't contain any code;
| it's purely focused on conceptualising the interface design
| process.
| hoofhearted wrote:
| The code portion of the book can be found at Tailwind UI. I
| personally have the Application UI license, and I'm going to
| upgrade to full access soon. It's 100% worth the cost if you
| are building out component libraries and repeatable work.
|
| https://tailwindui.com/
| adelowo wrote:
| [dead]
| wruza wrote:
| _Use fewer borders. Borders are a great way to distinguish two
| elements from one another, but using too many of them can make
| your design feel busy and cluttered. Instead, try adding a box
| shadow, using contrasting background colors, or simply adding
| more space between elements._
|
| Everything I hate in UI right from the start. To the point that I
| have to re-add #0004 borders in settings.json -
| workbenchColorCustomizations to make it look decently delineated
| instead of looking like one muddy blob. Most real world objects
| have distinguishable 3d borders and we are trained to detect and
| follow them. I know your designer soul doesn't like it, but deal
| with it please. Use a normal amount of borders.
| temp_account_32 wrote:
| > Use fewer borders.
|
| The one with borders looks better to me than the one without,
| it's subjective.
|
| Also the whole post is literally an advertisement to sell some
| book.
| itronitron wrote:
| Just read the Tufte books for guidelines as well as inspiration.
| https://www.edwardtufte.com/tufte/books_ei
| asoneth wrote:
| Seconded the Tufte books, especially to learn about the
| principles of visual communication. Though as a fan who has all
| his books and attended multiple lectures, I have to admit that
| his forays into interaction design were... underwhelming.
| jamestimmins wrote:
| I, for one, liked the book and refer to it semi-frequently when
| I'm working on a project. It's good for nudging things in the
| right direction, even if it can't turn me into a designer.
| [deleted]
| BoorishBears wrote:
| Is fighting "flash of unstyled text" part of that?
| jimmytidey wrote:
| As other commenters have noted, surely the goal should be to make
| usable designs, of which looking beautiful is a small part?
| layer8 wrote:
| Even worse, too much "beauty" can end up being distracting, and
| thereby reduce usability. Good UI is like good film music --
| you don't notice that it's even there.
| shakow wrote:
| Depends on whether you have to sell it.
| d0m wrote:
| Hands down the best book I've read to level up my UI game. Highly
| recommended to developers who want to get better at UI design
| with no bullshit and a lot of practical examples.
| max_streese wrote:
| Is it just me or do prices for a lot of UI/design resources seem
| high compared to prices of resources on other parts of IT? 100 $
| for a 218 page PDF seem quite steep to me.
| kernal wrote:
| Their "incorrect" Contacts example looks better than their
| "correct" example IMO.
| Gordonjcp wrote:
| You know, if you're charging $100 for a book, you can probably
| afford to pay for your own ads too.
| joebiden2 wrote:
| One of the rare moments I simply don't understand how something
| gets upvoted that much on HN.
|
| Edit: this is like "get rich by just following this". It's not
| wrong, but so much facepalm-inducing, and it's just 100 bucks.
| Sorry, but: WTF?
|
| In my mind there is a bot army upvoting this article at work
| right now.
| dan1234 wrote:
| At 20,000 copies sold (according to the site), it seems you get
| rich by writing the book!
| epolanski wrote:
| Completely lost as well on how did it got so many votes so
| quickly.
| onnnon wrote:
| Use the original title: "Make your ideas look awesome, without
| relying on a designer."
| hoofhearted wrote:
| Shoutout Steve Schoger!
|
| If you don't already follow him, you probably should.
|
| https://twitter.com/steveschoger
| eviks wrote:
| > [design courses] focus so much on high level principles like
| color theory and typography which, while important, never helped
| me make instant improvements
|
| Strange, making the very low contrast text more visible on this
| site is an instant improvement, and it's right there in the
| "color theory"
| moffkalast wrote:
| It's also right there in the "common sense theory"
| ASalazarMX wrote:
| Crossing into "visitors can't read it if they can't see it
| theory".
| samhuk wrote:
| The line between "an advanced, niche concept" and "common
| sense" is very blurry. It's continuous, not discrete. What
| you think it common sense is probably not for a considerable
| proportion of other people.
|
| Regarding the actual topic at hand though, I actually do
| agree with you (hence disagree with OP), since I _do_ believe
| that mastering concepts like color theory and typography are
| indeed extremely low on the extensive priority list of things
| to master to create great UIs.
|
| I've been building them, and convinced people to pay me quite
| handsomely for them, for quite a considerable amount of time,
| and never have I had to deep-dive into typography, color
| theory, or the like.
| patternMachine wrote:
| The contrast ratio for the body text is 7.57:1 (or 7.25:1 if
| the text is on the light grey background), which meets AAA
| accessibility standards (which is 7:1).
| layer8 wrote:
| I can tell you that it still looks rather low-contrast and
| makes it harder to read for me.
| wizofaus wrote:
| Body text isn't the issue I would think - it's various
| headers, downvoted and especially "dead" posts which are
| almost to read without selecting the text, even with perfect
| colour vision.
| oliverbennett wrote:
| The only UI/UX newsletter I subscribe to[0] also has a a
| similar problem, but the advice is usually solid. Maybe the
| first and/or last rule should be 'seek feedback'.
|
| [0] https://user-interface.io/
| thih9 wrote:
| > Borders are a great way to distinguish two elements from one
| another, but using too many of them can make your design feel
| busy and cluttered. Instead, try adding a box shadow, using
| contrasting background colors, or simply adding more space
| between elements.
|
| In many cases I like busy and cluttered; I enjoy
| https://dofsimulator.net/ , I use gmail in "compact" mode, etc.
|
| The example listed as "bad" is also interesting; it is busy,
| which may be unappealing, but it also means higher contrast. Also
| being "cluttered" lets me simply see more information at once. So
| if I had to deal with large amount of data, I'd prefer that "bad"
| design.
| web3-is-a-scam wrote:
| my current rule is to ask ChatGPT to do it for me
| chankstein38 wrote:
| Are you memeing or are you serious? Because I'm curious how
| you'd have a language model design a page for you. Just ask it
| for the HTML and CSS for a nice looking page?
| web3-is-a-scam wrote:
| ChatGPT is extremely good at writing HTML and CSS, yes - if
| you have a basic idea about what you want it to look like the
| bot can do the rest, including iterate on it.
| chankstein38 wrote:
| I haven't tried to do that with it yet but I love the idea!
| I'm going to have to give it a shot! Thanks!
| web3-is-a-scam wrote:
| With gpt4 image recognition you can have it do a design
| from a napkin drawing use it's image recognition,
| absolutely wild.
| kyleyeats wrote:
| I wrote an app that does this, and yeah, basically. In my
| experience it's really hard to get it to to _stop_ writing
| CSS.
| chankstein38 wrote:
| That's definitely a struggle I've had with GPT overall haha
| "Please just stop I don't need 4 paragraphs on that I
| wanted a sentence"
| pazimzadeh wrote:
| Design is how it works, not how it looks. This article seems to
| mainly be talking about the "polish" of a design. There are more
| important principles which don't have anything to do with polish,
| such as not putting the Cancel button next to the Ok button.
|
| More like this:
|
| https://lawsofux.com
|
| https://asktog.com/atc/principles-of-interaction-design/
|
| https://www.nngroup.com/articles
|
| I recommend prototyping the flow/feel of the app before working
| on the polish, or the functionality:
|
| https://principle.app/
| Uehreka wrote:
| > Design is how it works, not how it looks.
|
| After over a decade of people jumping into these discussions
| with this line, I've gotta push back: Design is also how things
| look, and how things look can be important.
|
| Consumers care about how things look. If we dismiss
| presentation and drive people towards UX stuff every time it
| comes up, then the people we talk to are going to end up having
| good ideas that no one buys because the packaging is a mess.
|
| Yes: If you have a pretty modal but it can't be dismissed by
| clicking outside of it, that's Bad Design. But when you've
| hammered in all those errant nails and built something that
| works well, often you look at it and go "I wish it weren't so
| ugly". And we do need books/resources to give people the
| building blocks they need to make an app that people will agree
| is "basically good-looking". (And then hopefully more advanced
| books/resources about particular styles so people can develop
| their own stylistic voice)
| adventured wrote:
| More specifically there can be no separation between how
| something looks and how it works, they're bonded (and for
| good reason). There is no scenario where you can actually
| fully break the two apart. Any attempt to try harms one side
| or the other or both sides. How it works and how it looks go
| in tandem in all cases, they heavily influence eachother,
| either making the whole better or worse depending on how you
| go about creating for that reality.
|
| Anybody telling you different is arguing from a pretty severe
| bias. If you're designing on the basis of how something
| works, and not also on how it looks at the same time, you're
| going to create a subpar outcome.
| gregbander wrote:
| Design like most words has a definition that's generic so it
| can be applied as needed. There is no immutable rule when to
| use it.
|
| The cone of shame my dog has right now "looks cool"; very
| sleek and streamline for a disposable thing, the designer
| surely was paid a premium, but the fasteners mechanics were
| poorly designed; vet tech said even she struggles with them
| and she puts them on dogs all week.
|
| Design is how it looks and works as "designers" come up with
| both. The whole idea we can just put our foot down regarding
| definitions is not at all how _reality_ works since nothing
| works on divine mandate. It's relative.
| threatofrain wrote:
| I'd also note that despite Jakob Nielsen's prominence nobody
| designs like he suggests. We should be open to the idea that
| beauty and delight may be more important than usability or
| features.
| actionfromafar wrote:
| It was a long time I looked in that book but I hated it.
| Not because it was ugly, I like ugly. But the advice didn't
| make sense. It's been years sincy I thought of Nielsen,
| maybe I should give at a peek again.
| [deleted]
| falcolas wrote:
| Respectfully, fuck that. Beauty matters the first time you
| use it, whereas functionality matters every single time.
|
| Or, in business terms, beauty has terrible ROI.
| pedalpete wrote:
| Where do you get the idea beauty has terrible ROI?
|
| Look at almost any premium product and the premium that
| is being paid for is in the beauty. Rarely is it in the
| actual quality of the product.
| albertop wrote:
| Tell it to Apple.
| lambdasquirrel wrote:
| People tend to take care of things that are both well put
| together _and_ beautiful.
| epolanski wrote:
| I think this era of thinking is over.
|
| People judge apps by how they look more than how they work.
|
| If it looks professional and good looking they give it more
| credit and chances than it deserves. If UX is good but
| looks are not airbnb/apple wannabe they tend to distrust
| it.
| goodlinks wrote:
| I hold out hope that when the tool is in a market that
| delivers actual value functionality and usability still
| tend to win out.
|
| I think that a lot of software is inherently low (or even
| negative) value and thats why shiny wins.
|
| Could easily be dreaming tho
| actionfromafar wrote:
| There is a market for good things anyways, but not sure
| how niche. I'm on your team tho
| sprkwd wrote:
| Form follows function.
| BalinKing wrote:
| This criticism feels fairly ironic, since the first guideline
| at lawsofux.com is the "Aesthetic-Usability Effect: "Users
| often perceive aesthetically pleasing design as design that's
| more usable" (https://lawsofux.com/aesthetic-usability-
| effect/).
| petilon wrote:
| > _Design is how it works, not how it looks._
|
| No, it is not. If you're Steve Jobs then yes, but otherwise how
| it looks and how it works are usually two different job
| functions. People who are good at visual design are not usually
| knowledgeable enough to do functional design, and people who
| are good at functional design are not necessarily good at
| visual design.
| creativenolo wrote:
| > No, it is not.
|
| Bold statement for something subjective. I think you are
| confusing design and art (from your own experience or
| misfortune). The processes of visual design have informed (or
| formalised) the design as a process in other fields. Artists
| have a style as a function. Designers (visual or not) have
| process. No one is great at everything. Mediocre designers
| are either too visual or not at all (especially the latter),
| in my experience. Good to great designers grasp both and have
| breath. Even the ones that don't have art as a function can
| direct, steer and brief the art of a project (or be
| resourceful with it.) But you can't have design without
| process.
| stonemetal12 wrote:
| The dictionary says it means "a plan or drawing produced to
| show the look and function or workings of a building,
| garment, or other object before it is built or made."
|
| So it is both "Look" and "function". Claiming looks aren't
| part of it is incorrect.
| petilon wrote:
| My comments are based on experience working on projects
| where some designers (who went to art school) heard Steve
| Jobs say "design is how it works, not how it looks" and
| then decided that they own the "how it works" part. The
| result, from what I have seen, is disastrous.
|
| Functional design (how it works) and visual design (how it
| looks) is really two different job functions. You don't
| need an art degree or even be good in art in order to
| design the functionalities or even interactions of a
| product. At the same time, being good in art and designing
| cool looking UI doesn't make you qualified to design the
| functionalities or interactions of the product. Not even
| close.
|
| Both job functions are needed to build a good product. In
| rare cases one person may be able to do both.
| doctor_eval wrote:
| Jobs said,
|
| "In most people's vocabularies, design means veneer. It's
| interior decorating. It's the fabric of the curtains of
| the sofa. But to me, nothing could be further from the
| meaning of design. Design is the fundamental soul of a
| human-made creation that ends up expressing itself in
| successive outer layers of the product or service."
|
| Design is not just one thing or another. It happens at
| each layer. From deciding how many options you want to
| present to the user, to how they will be presented. Or
| deciding how to deal with errors in the backend, versus
| reporting them in the front end. Design decisions are
| made the whole way through.
|
| I think this is visible with lots of Apple products
| because some people complain that they aren't flexible
| enough. But reducing configurability is as much a design
| decision as the colour of the icons. (And sometimes more
| challenging)
| petilon wrote:
| > _Design is not just one thing or another. It happens at
| each layer._
|
| I think we are in agreement. "How it works" is design.
| "How it looks" is also design. Sometimes, but not
| usually, one person may be able to do both types of
| design.
| illiarian wrote:
| > No, it is not.
|
| Yes, it is. If it's about how it looks, then it's
| illustration, not design.
|
| > how it looks and how it works are usually two different job
| functions.
|
| Again, no. If you skip functionality in your design, you will
| end up with an unusable product.
| eschneider wrote:
| For a site about UX, you'd think https://lawsofux.com would
| have picked a better url. O_o
| inanutshellus wrote:
| evokes memories of "expertSexChange.com -- err, I mean,
| ExpertsExchange.com" back in the day.
| phaedryx wrote:
| Can you really divorce design from appearance? My first clue of
| how to use something is how it looks.
| chadash wrote:
| > Design is how it works, not how it looks.
|
| I think it's both. Interior designers are primarily interested
| in aesthetics. Same for the majority of famous fashion
| designers, who are usually not focused on making utilitarian
| clothes. It seems like most peoples' definition of design would
| include the work in those fields. UX is a better description of
| the aspect of design that cares about functionality and not
| aesthetics.
| canadianfella wrote:
| [dead]
| wizofaus wrote:
| Odd, when I first clicked that second link it opened a page
| that was virtually unreadable on a mobile device (Android
| Chrome) - the text literally curved off the left hand edge of
| the screen. Which made the first sentence "The following
| principles are fundamental to the design and implementation of
| effective interfaces[...]for[...]mobile devices..." suggest
| there was little point reading on. But on reloading in another
| tab it was basically fine (though I'd argue still not optimal).
| pazimzadeh wrote:
| https://www.nytimes.com/1888/07/06/archives/easier-to-
| give-a...
| wizofaus wrote:
| Well yes, and worse, after opening it on a desktop browser,
| it still looks pretty average, and the way the background
| brightens as you scroll down is very distracting.
| PaulBGD_ wrote:
| Looks cool, but what do I gotta do to get an actual printed book?
| Would love something I could physically reference.
___________________________________________________________________
(page generated 2023-04-11 23:01 UTC)