Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bring Back Idiomatic Design (2023)

essays.johnloeber.com

Post reply on HN
Print view View original

131–140 of 385 posts

Re: Bring Back Idiomatic Design (2023)

#131

Post by cratermoon »

layer8 wrote: post #97
uhoh-itsmaciek wrote: post #58

In text boxes in some applications, enter submits the entered text, and ctrl-enter forces a newline (not at my computer, but I think Slack does this). In others, it's the other way around (pretty sure GitHub does this for comments). I don't know how we got here and I don't know how to fix it, but "bring back idiomatic design" doesn't help when we don't have enough idioms. I'm not even sure if those two behaviors are…

Decades ago, Return and Enter were two different keys for that reason: Return to insert a line break, Enter to submit your input. Given the reduction to a single key, the traditional GUI rule is that Enter in a multiline/multi-paragraph input doesn’t submit like it does in other contexts, but inserts a line break (or paragraph break), while Ctrl+Enter submits. Chat apps, where single-paragraph content is the typical…

don't get me started on backspace vs delete...

Re: Bring Back Idiomatic Design (2023)

#132

Post by andrepd »

AgentEpsilon wrote: post #91
uhoh-itsmaciek wrote: post #58

In text boxes in some applications, enter submits the entered text, and ctrl-enter forces a newline (not at my computer, but I think Slack does this). In others, it's the other way around (pretty sure GitHub does this for comments). I don't know how we got here and I don't know how to fix it, but "bring back idiomatic design" doesn't help when we don't have enough idioms. I'm not even sure if those two behaviors are…

Teams does both - normally it’s Enter to submit and Shift+Enter for a new line, but when you open the formatting tools it switches. They at least do have a message indicating which key combo inputs a new line, but it still gets me on occasion.

The Signal desktop app does both too, I guess, but in a way that actually makes sense. Enter sends a message since IMs tend to be short one-liners. Shift-Enter inserts a line break.

But if you click an arrow on the top of the text box, it expands to more than half of the height of the window, and now Enter does a line break and Shift-Enter sends. Which makes a lot of sense because now you're in "message composer" / "word processor" mode.

Re: Bring Back Idiomatic Design (2023)

#133

Post by lelanthran »

kevincox wrote: post #55
tgv wrote: post #34

Earlier quoted context omitted.

I am pretty sure icons are easier and faster to recognize, except when you make them (too) small. In particular, they probably are easier in the long run, as long as they don't change position. But in a context where things change or you need a lot of buttons, words probably win.

This is why you need both. Icons are faster to recognize, but words tell you what the icons need. So you need the words at first to discover the icons, then the icons serve as valuable tools for scanning and quickly locating the click target that you are looking for.

> This is why you need both. Icons are faster to recognize, but words tell you what the icons need. So you need the words at first to discover the icons, then the icons serve as valuable tools for scanning and quickly locating the click target that you are looking for.

Only if there are few icons. If every item in that menu in the screenshot of Windows had an icon, and all icons were monochrome only, you'd never quickly find the one you want.

The reason icons in menu items work is because they are distinctive and sparse.

Re: Bring Back Idiomatic Design (2023)

#134

Post by realityfactchex »

Thorrez wrote: post #124

>using GMail is nothing like using GSuites is nothing like using Google Docs G Suite (no s) was the old name for Google Workspace. Google Workspace includes GMail, Google Docs, Google Sheets, Google Calendar, etc., so it doesn't really make sense to say that Google Workspace has a different UX than Google Docs, if Google Docs is part of Google Workspace. Disclosure: I work at Google, but not one of the listed product…

If GSuites was a typo for GSites (e.g., informal for Google Sites classic), then the sentence in TFA could work.

IDK if such was the intent, of course.

Re: Bring Back Idiomatic Design (2023)

#135

Post by robocat »

We've lost some common features:

* Undo & redo

* Help files & context sensitive F1

* Hints on mouse hover

* Keyboard shortcuts & shortcut customisation

* Main menus

* Files & directories

* ESC to close/back

* Drag n drop

Revelation features when they first became common. Now mostly gone on mobile and websites.

Re: Bring Back Idiomatic Design (2023)

#136

Post by hn_throwaway_99 »

nkrisc wrote: post #17
teeray wrote: post #12

> There are hundreds of ways that different websites ask you to pick dates Ugh, date pickers. So many of these violently throw up when I try to do the obvious thing: type in the damn date. Instead they force me to click through their inane menu, as if the designer wanted to force me into a showcase of their work. Let your power users type. Just call your user’s attention back to the field if they accidentally typed 0…

Is 03/04/2026 March 4th or the 3rd of April? If you have an international audience that’s going to mess someone up. Better yet require YYYY-MM-DD.

> Better yet require YYYY-MM-DD

This is the equivalent of requiring all your text to be in Esperanto because dealing with separate languages is a pain.

"Normal" people never use YYYY-MM-DD format. The real world has actual complexity, tough, and the reason you see so many bugs and problems around localization is not that there aren't good APIs to deal with it, it's that it's often an after thought, doesn't always provide economic payoff, and any individual developer is usually focused on making sure it "looks good" I'm whatever locale they're familiar with.

Re: Bring Back Idiomatic Design (2023)

#137

Post by lelanthran »

hungryhobbit wrote: post #29

"Avoid JavaScript reimplementations of HTML basics, e.g. React Button components instead of styled elements." Tell me you know nothing about web development without saying you know nothing about web dev ... 1. React is an irrelevant implementation detail. You can have a plain HTML button in a button component, or you can have an image or whatever else. React has nothing to do with the design choices. 2. React is also…

> React is also how you get consistent design across a major web app. Can you imagine if every button on every site was the same Windows button gray color, regardless of the site's color? It'd be awful! React components (with CSS classes) are a way for a site like Amazon to make all their buttons orange (although I don't actually know if Amazon uses React specifically).

I don't understand this point specifically. I make all buttons on a site have the same theme without needing a framework, library or build-step!

Why is React (or any other framework) needed? I mean, you say specifically "React is also how you get consistent design across a major web app.", but that ain't true.

Re: Bring Back Idiomatic Design (2023)

#138

Post by watermelon0 »

embedding-shape wrote: post #108
layer8 wrote: post #106

One of my pet peeves is that increasingly frequently, pressing Enter to submit a web form doesn’t even universally work anymore. Instead you have to tab to the submit button, and (depending on the web page) have to press Space or Enter to actuate it. Another annoyance is that many web forms (and desktop apps based on web tech) don’t automatically place the keyboard focus in an input field anymore when first displayed…

> One of my pet peeves is that increasingly frequently, pressing Enter to submit a web form doesn’t even universally work anymore. Instead you have to tab to the submit button, and (depending on the web page), have to press Space or Enter to actuate it. The other day I used Safari on a newly setup macOS machine for the first time in probably a decade. Of course wanted to browse HN, and eventually wanted to write a co…

System Settings -> Keyboard -> and toggle Keyboard navigation.

I'm not sure why this isn't the default, but this allows for UI navigation via keyboard on macOS, including Safari.

Re: Bring Back Idiomatic Design (2023)

#139

Post by zahlman »

> Every single button is clearly visually a button and says exactly what it does. And each one has a little underline to indicate its keyboard shortcut. Isn’t that nice?

Something not mentioned here (that came from the Mac world as I understand it): everywhere that the text ends with an ellipsis, choosing that action will lead to further UI prompts. The actions not written this way can complete immediately when you click the button, as they already have enough information.

Re: Bring Back Idiomatic Design (2023)

#140

Post by hungryhobbit »

lelanthran wrote: post #137
hungryhobbit wrote: post #29

"Avoid JavaScript reimplementations of HTML basics, e.g. React Button components instead of styled elements." Tell me you know nothing about web development without saying you know nothing about web dev ... 1. React is an irrelevant implementation detail. You can have a plain HTML button in a button component, or you can have an image or whatever else. React has nothing to do with the design choices. 2. React is also…

> React is also how you get consistent design across a major web app. Can you imagine if every button on every site was the same Windows button gray color, regardless of the site's color? It'd be awful! React components (with CSS classes) are a way for a site like Amazon to make all their buttons orange (although I don't actually know if Amazon uses React specifically). I don't understand this point specifically. I m…

It depends on the type of site/app you are building. If you are building a basic website (not a web application), or a simple application, you don't need React (or a similar framework like Vue or Angular). You might not even need Javascript at all.

However, as you build more complex and interactive applications, you need "framework", like React. It's essential to simply handle the complexity of such applications. You will not find a major web app that is built with out a framework (or if it is, the owners will essentially have to create their own framework).

When you're using such tools, they are how you enforce consistent UI. Take Tailwind, the hugely popular CSS framework (I believe its #1). They have nothing to do with Javascript ... but even they willl tell you (https://v3.tailwindcss.com/docs/reusing-styles#extracting-co...):

"If you need to reuse some styles across multiple files, the best strategy is to create a component if you’re using a front-end framework like React, Svelte, or Vue ..."

The author is completely mistaken in thinking React ... or even that layer of web technology at all (the development layer) ... has anything to do with what he is complaining about. It has everything to do with design choices, which are almost completely separate from which framework a site picks.

Post reply on HN