Don’t design like a programmer (2010) | Hacker News Reader

Don’t design like a programmer (2010)

uxdesignedge.com

113 pointspanic52 comments

> Exposing representation invariants In object-oriented programming, a representation invariant is a set of constraints that a concrete data type must uphold to correctly represent an abstract data type. Simply mapping a data structure to a UI would expose the invariant and put the burden of enforcing the invariant on users instead of the code. A typical example is having to enter a phone or part number in a specific format instead of the program handling any reasonable input. > Warning sign: Users required to enter data using a specific format.

This one drives me nuts. Soooooo many forms say "enter your phone number no spaces or dashes or parens" or cc number. Please just remove the dashes, spaces, parens when checking validation and maybe after submit. Don't force the user to have to do this. They might be copying and pasting

Also don't make some 4 field 16 digit custom form that ruins backspace behavior and makes it impossible to copy and paste. That also means don't limit the field to 16 characters. If a users pastes in "xxxx-yyyy-zzzz-wwww" and only get "xxxx-yyyy-zzzz-w" you're only going to frustrate them.

This is also an issue with many phone apps. Some you can't paste a number in. Try copying a number from Safari iOS into Google Hangouts Phone dialer. There's no paste option so I'm forced to write down the number on paper so I can manaully type it back in. Even the built in iOS phone dialer sucks. While you can paste you can't edit. So if you copy something off a webpage and because of the crappy smartphone copy/paste issues you get something like "dial:123-4556" there's no way to remove the "dial:" part. At best you have to paste into some other app that will let you edit, edit, then copy and paste again. Sheesh, does no one ever use this stuff?

Is there any reason at all for not allowing spaces in CC numbers or other long strings of digits?

I tend to write applications such that spaces and dashes are removed on input from long strings of digits and then optionally re-added on display. But I've come across case where dashes and spaces (in this case in product's serial number) were significant.

Another one is password restrictions: if I want to use a one-character password, that's my business. If I want to use my birthday as password, that's my business.

If the app developer is concerned about security in case an attacker gets hold of the raw database, there are better tools for that (i.e. proper salting and hashing)

Salting and hashing isn't going to help you much if you're prone to using one-character passwords. Unfortunately, people will use one-character passwords if they are allowed to, so systems should require strong passwords to protect users.

That's not to say there aren't problems with password restrictions, but they are mostly at the other end of the spectrum. For example, I have seen far too many systems requiring that passwords must be no longer than ten characters long, or only allowing a very small subset of characters.

> Salting and hashing isn't going to help you much if you're prone to using one-character passwords

Why not? OK I'm no cryptographer, so I'm probably talking out of my arse but why not store a random salt PER user, and the hash of (password + salt)? To an attacker, a one character password will be as hard to crack as a complex one.

An attacker would still be able to brute-force the password in a split-second.

Besides, if you're using the same one-character password for multiple systems, the password can easily be deduced on a system that only uses hashing (or a weak form of salting), and an attacker can use that password to access accounts on stronger systems.

You just try every character. A computer can do that in < 1 second.

> hard

A 1-char password can be guessed in as many attempts as the size of the allowed character set, and in half the guesses on average. Even less guesses are required on average if passwords aren't distributed uniformly and this distribution is known (i.e. from previously cracked password databases you know most users pick "e" for a password, so you start with that character and get into the accounts of 40% of all other users in a single guess).

More generally, the average number of attempts required to crack a password with a known length is 1/2 * charsetsize ^ length. So with alphanumeric case-sensitive 1-char passwords the number of attempts required on average is 31. That's not a lot.

The only thing that salt + hash does is make it possible to check the password without having to store the passwords on server; it only serves to protect user passwords after the password (hash) database has been stolen by attackers.

The only way to keep a semblance of security when user passwords are very short is to aggressively rate-limit password attempts, but in the case of 1 char passwords that doesn't help, you'd have to lock the user out after a single wrong password entry, and even then attackers would have a chance of 1/62 (26 lowercase letters, 26 uppercase letters and 10 numbers) chance of getting into your account.

Bravo.

I think what you mean is a pepper: https://en.wikipedia.org/wiki/Pepper_(cryptography)

At the very least, every site should clearly explain its password policy. e.g. you must have a letter, a number, no slashes, 8-40 characters, whatever.

As I write this, I am locked out of my 401(k) plan's website because it allows you to reset your password to an illegal string, which fails when you try to log back in. Crappy corporate UX boggles the mind.

I'm fine with a minimum length but adding some random characters to my password will only make it harder to remember my 20 character long passwords.

That's if you're allowed to use that many characters.

A disturbing number of sites (even banks) put limits on the size of a password which tend ot make me think they're storing it somewhere plaintext...

I'd go so far as to say "especially banks".

Banks, credit card companies, insurance companies, and other places like that are the only time I usually run into the "4-6 characters, no symbols" type restrictions.

> if I want to use a one-character password, that's my business

It's really not. Depending on the service, someone who guesses your weak password and compromises your account may very well be able to injure more people than just you.

But then he, knowing the all-complex-password he's forced to create, can also make those others miserable too. Just because he is known doesn't mean he can't broke everything.

So, the problem is with the service, not with his weak password. It's just a matter if someone will be easily / hardly / not at all blamed.

If the user isn't going to take the security of the app you built seriously, you the app developer has to.

It never looks bad for the user to get their data breached. It always looks bad and can do lasting damage to a company if an application suffers a breach.

I don't mind -- too much -- those kinds of restrictions.

The one that drives me batshit-insane is "maximum length". WTF?

> Try copying a number from Safari iOS into Google Hangouts Phone dialer. There's no paste option

The paste option is there, however it's very tricky to get it to appear. You have to hold your finger down over the space where the number appears, but sometimes you have to try it 5-10 times to get the paste option to actually appear. Before Google Voice shut off external integration and ruined it I had an app called Talkatone which worked with Google Voice, Hangouts has never been as good as that app.

That's why I think there should be an online resource with different types of UI elements, and their functional requirements. This way, when any developer feels the desire (or is forced to) reinvent the wheel, at least they can get a complete picture of all the requirements.

try pasting into any facebook text-entry widget (e.g., chat). editing is completely broken. multi-paragraph text is chopped off when submitted. etc. rather amazing when you consider how much money software engineers make at that company.

Engineers don't often get to chose the features they work on, or to what degree they get polished. If it amazed me, I would direct such amazement to the correct person :`D

</attempt at humorous pedantry>

your point is well taken. software engineers are often subject to the whims of PMs and execs, and aren't always able to pursue the level of excellence they (the engineers) might prefer.

This is actually pretty well thought out here. I feel like the most important one is the one that I consider to be the most difficult: Optimizing for the most probable.

To me, it's always a struggle between probability, predictability, and shortest possible paths between states. Probability being that at any given point, the path to what the user is most likely trying to do is as short as possible. Predictability means that from any given state, there is a consistent and predictable way that the user can know how to get to any other state. And finally, that from any state, the ability to switch to any other state in the application is as short as possible (which obviously conflicts with probability).

In my mind, almost every UX should be the equivalent of tabbed, nested folders. This takes care of predictability and short paths between all application states. The area this falls behind is in probability, in that there is no effort made to guess what the user wants. Given that your average user in a large application is unlikely to care about anything outside of the given task they're trying to accomplish, I feel like it's arguably more important than the things I traditionally prioritize for, and therefore something that I have to work on the most.

As a 'programmer' I find I often have a better idea than end users about what should be implemented. I sit in front of the system I am building all day, and I notice if performing certain actions is too slow or frustrating. I take an interest in UX concepts and will read articles on them, as opposed to "can we get a new button here to do X" without any real thought going into the process.

That assumes that you as a programmer actually use the thing you are building for something else than testing. I've seen many LoB applications that get optimized by this process for programmer testing instead of normal user workflow. Yesterday's example (the application is desktop thick client for REST web service): (mostly developmen only) UI for manually creating test data is readily available on application's toolbar, while button for reloading form/view state from server has different placement on each form and in some parts of the application is completely absent (obviously, UI programmers restart the thing often enough that they essentially don't need that button).

That only works if you work on apps that you actually use, and more importantly use in the same way that your end users use it.

Having worked on specialized engineering applications where I'm not the end user, I'll admit to on more than one occasion making some really stupid UX decisions since it turns out that the engineers actually working with the app on real projects where using it very differently than I was when testing it on a tiny made up toy project.

Spending just 20 minutes sitting next to someone trying to get real work done can be a real eye opener some times.

I watched the users of my last app cut and paste data from the application into excel, mess with the data in excel, upload the excel back to the database and ask me what was causing the errors when the unvalidated data in excel would not go back in to the DB. It was eye opening how they accept such a crap system. I tried to change it, but it was never given high enough priority.

Well, then, it's your responsibility to make sure that your application can cope with data pasted in from Excel, since that's obviously a critical part of the users' workflow.

It was a "temporary solution".

"Yes, you can built a web form with proper validation to replace it next month after you complete this URGENT feature".

If it can be replaced by a web form then Excel isn't a "critical part of the workflow". Getting data into the database was the critical part of the workflow. The users actually preferred the web forms that I did manage to replace Excel sheets with (more checkboxes, and far less cut and paste).

Anyway after 3 years of complaining about the same issues I realised it was time to leave.

in other words "Don't program like a designer"

Well, yeah, I don't think anybody thinks handing off design decisions to end users is a good idea.

This is a very good article. We should generalize this to quote Steve Jobs : 'We have to start with the user experience and work backwards to the technology'[1].

A lot of companies try to get around this by hiring external design teams who decide the user experience first and then asks engineers to implement the experience. Of course then problem is then if they are not technical enough they might not take into account how hard something could be ( http://xkcd.com/1425 )

[1] https://www.youtube.com/watch?v=1SIeTmORl0E

There's also a follow up where the wget UI is redesigned [0]. It's important to also read this because that's where the argument falls completely apart: most of the features have been sacrificed to the altar of "simplicity": the redesigned application is essentially useless.

Not only that, the design includes a really nice looking progress bar that is, unfortunately, impossible to implement.

[0] http://www.uxdesignedge.com/2011/11/don%E2%80%99t-design-lik...

I do not agree. He explained the thought process two times:

1) "The target users for SiteNabber are intermediate computer users. They have enough knowledge about computers and the Internet to want to copy a website’s files, but they aren’t so advanced that they would prefer using a more complex existing solution. Experts who want to control every detail aren’t target users!"

I agree with that. If you need a GUI you're not comfortable playing with wget from the command line and/or spending time reading the wget documentation. But you're advanced enough to know it is possible to download whole websites (!)

2) "Step 12: Test with real users, so there’s a good chance that I have some details wrong. This is normal and expected."

Design, like programming, is a never ending process. Last 20% take 80% of the time, yadda yadda. I am a programmer, and I desperately want to learn what is wrong with my designs. This article explained very clearly what is wrong in my (and most programmers) thought process when designing an UI:

Programmer flow: Write code -> Design UI around code -> Change code -> Apply changes to UI -> Rinse & Repeat

Correct, designer flow: Think long and hard about your target users and why they'll use your product -> Design the UI around their goals -> Write code -> Test with humans -> Adapt design to better suit their needs -> Rinse & Repeat

In the "Programmer's flow", code changes drive UI changes. When the code is feature complete and bug free the app is done.

The correct way is to have end users drive your UI changes. And till users aren't satisfied you are not done, even if the code is perfect.

> The correct way is to have end users drive your UI changes. And till users aren't satisfied you are not done, even if the code is perfect.

Yes! If we make an app for other people, we must actually make it for other people.

"If you need a GUI you're not comfortable playing with wget from the command line and/or spending time reading the wget documentation. But you're advanced enough to know it is possible to download whole websites (!)"

I disagree. Sure, I could run wGet from the command line, but then I have to either know what various switches/options are available and what kind of input it's expecting or consult the help parameter/man page. Maybe it's a tool I only use every once in a while.

The GUI puts all those options in front of me at once, with the ability to select them right next to the description of what they are, and the "ugly" GUI doesn't require me to navigate to sub-forms to discover/change other options available to me.

...but then, I'm a programmer, so what do I know?

SiteNabber is a completely different App, with a previously undefined objective, aimed at a "user" they just invented on the spot.

The redesign is generally good. But "nab" is a less common word than "get".

I think there is an interesting pattern that every larger software interface that is designed mostly by the developers converges against the IDE in which it was developed. But then on the other hand, superficial designers often just adjust towards the look and feel of their preferred environment as well (e.g. tendency towards the old iPhone look back then, then suddenly switch towards the flat new look of iOS, etc. And even in non-mobile applications like web applications).

The flat look of ios was a catch-up design.

But you are right that there are very strong trends in at least visual UI

This misses some crucial observations.

One, good UI takes time, even for experts. UI redesigns that are easily described can be hard to reprogram (e.g. “replace those dialog elements with a table!” may mean switching to entirely different programming interfaces, there may be no sane data model that matches both without rework, and the new method may have new bugs). If your manager is asking you to finish something and move on, you need to make trade-offs.

Two, historically there had been no serious shell in Windows environments for a very long time. When you have no other way to easily set a bunch of options, a crappy dialog that maps GUI elements directly to all possible options would have been a quick and practical way to expose all functions. I am not saying that these GUIs are good in any way but it makes perfect sense why they were created this way.

Third, low-level interfaces such as the command line are an EQUALLY important part of all UI. A “design” should not just focus on how to rearrange some buttons. Low-level options for tweaking a program can help immensely to edit down what belongs in the GUI. On Mac OS X for example, it is really cool that one can use "defaults write" for a bunch of stuff because you can implement a lot of options without cramming them into your GUI. On a web site, a thoughtful layout for service URLs and JSON data formatting is far better than something that seems hastily-constructed and full of structural problems and other inconveniences.

And also, this post is not showing convincing counter-examples.

That “SiteNabber” redesign from part 3 is not really fixing the real issue. If you’re going to create a graphical replacement for a tool that deals with web sites, exposing “site url” to users is still broken. Why not make it a browser plug-in where you can simply view the web site you want, and click a toolbar button to save what you are looking at (or long-press that button for a menu that exposes a dialog version of the save with a few common options)?

I've seen several applications that look like wget UI. They often are internal engineering applications, and, in the main work fairly well for the target audience. I think programmers know exactly what a good UI might look like, but (a) they don't always have to time to make such a thing. (b) it's not cost or time effective to produce one.

Personally I've done both sort of user interfaces, the quick crowded ones, and the task Centeric ones, where time is spent on design and redesign.

I don't really necessarily think that programmers are inherently bad screen design, but it requires the time/effort and inclination; where often, one or more of those are in short supply.

That was my thought: First, a text box to make entry POSSIBLE, then, if time allows, a select/option list to constrain to meaningful answers, then, the "other-with-text" option to allow the long tail of never before seen but valid answers.

And so on, as time allows.

> "Having a privacy hurdle If the data structure needs personal information or information that is difficult to obtain (such as having an account, finding an account name or password), users might be unwilling to provide such information—especially if such information shouldn’t be required to perform (or at least initiate) the task. Warning sign: Users are required to have accounts, log on, or provide personal information unnecessarily."

Just about every app, service, and site does this now. It's ridiculous that this is the case, but everyone wants a slice of the pie so to speak.

I disagree with the date comment "it’s easier to expose a raw date than a properly formatted date for the user’s locale". I'm constantly fighting software that tries to localize dates. Paypal thinks I live in country A and uses that format. My web host is in country B and uses their own format. I actually live in country C which has yet another format. It's no fun reconciling this in a spreadsheet which I have to keep changing the date formats in. Just use YYYY-MM-DD everywhere. Everyone knows what it means.

Not a other critizism of the wget UI! We know it's bad, but it's simply because it's a 1:1 mapping to the command-line options. And command-line options is a flattened representation of all options. They are quite often not even combineable. A well-designed options class hierarchy with all constraints in place would map quite nicely to a GUI wizard.

This reminds me how much I miss those old clusterfuck interfaces of early windows day.

I find them much more easy to play with and learn them in details.

Windows 95 to 2000 and the respective Microsoft software during this time had the best interfaces, hands down. Minimalistic, grey, fast.

I miss those and their Unix counterparts, the old Motif apps. We should bring Motif back.

Heck, with flat design being a thing, we should bring Xaw back.

Another take on the same theme: http://www.howtospotapsychopath.com/2009/05/21/a-surprisingl...

Reply on news.ycombinator.com