Principles of UI, A Thread:
1. natural mapping
2. visibility of system state
3. discoverability
4. constraints and affordances
5. habits and spatial memory
6. locus of attention
7. no modes
8. fast feedback
9. do not cause harm to a user's data or through inaction allow user data to come to harm
10. prefer undo to confirmation boxes. For actions that can't be undone, force a "cooling off" period of at least 30 seconds.
11. measure using Fitt's, Hick's, GOMS, etc. but always test with real users.

12. don't assume that your skills or knowledge of computers as a designer or programmer in any way resemble the skills or knowledge of your users.

13. Consider the natural order of tasks in a flow of thought. Verb-Noun vs. Noun verb. Dependency->Dependants vs. Dependants->Dependencies.

14. Instead of having noob mode and advanced mode, use visual and logical hierarchies to organise functions by importance.

15. Everything is an interface, the world, learning new things, even perception itself

16. Consider the psychology of panic. Panic kills scuba divers, panic kills pilots. panic kills soldiers. panic loses tennis matches. Panic leads to stupid mistakes on a computer.
more at: asktog.com/columns/066Panic!.h

17. Consider the 3 important limits of your user's patience:
0.1 second, 1 second, 10 seconds

nngroup.com/articles/response-

18. An interface whose human factors are well considered, but looks like butt, still trumps an interface that looks slick but is terrible to use. An interface that is well considered AND looks good trumps both, and is perceived by users to work better than the same exact interface with an ugly design.

19. Don't force the user to remember things if you can help it. Humans are really bad at remembering things. This includes passwords, sms codes, sums, function names, and so on. My own personal philosophy is to consider humans a part of your system, and design around our shortcomings instead of thinking of users as adversaries. Software should serve humans, humans shouldn't serve software.

20. Some Sources:
Donald Norman
Jef Raskin
Jacob Nielsen
Bruce "Tog" Tognazzini

I recommend all the talks by Alan Kay and Bret Victor, here's two:

Doing with Images Makes Symbols
youtube.com/watch?v=p2LZLYcu_J
The Future Of Programming
youtube.com/watch?v=8pTEmbeENF

The first 8 items of this thread are extremely terse, to the point of being meaningless on their own. Please use them as search terms, or ask me to expand on them when my dog isn't barking at me to go to bed.

21. Gall’s Law:
A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system.

22. show, don’t tell. lengthy tutorials and “protips” forced on the user at app start usually do nothing other than get in the way of the user’s task. if you want to teach the user about a feature, include easy to find examples.

23. don’t interrupt flow of thought. if a user is opening an application, they usually have some specific task to complete. nagging them at this point in time about software updates or handy tips is very user hostile.

24.many jokes are made about the “save” icon looking like a floppy disk. it’s very appropriate, since the command as a concept is built around the technological limits of floppy disks, limits that are comically irrelevant in the 21st century.drag your app out of the 1980s and implement autosave and version control already.

25. consistency consistently consistent. there’s few things more fun than designing your own custom ui widget toolkit, css framework, or interaction paradigm. however, please strongly consider *not* doing this. custom UI is like ugly baby photos. instead, stick as much to the HIG guidelines and conventions of the platform you are on, so users can use what they’ve already learned about where things usually are, and what the fuck the weird molecule icon does.

26. try to imagine ways to use your shiny new software to abuse, harass, stalk, or spy on people, especially vulnerable people. ask a diverse range of people to do the same.
then fix it so you can’t. if you cannot figure out how to do your special software thing without opening vulnerable people to abuse, consider not making it available to anyone.

27. UX is ergonomics of the mind (and also body). Where traditional ergonomics considers the physical abilities and limits of a human body, UX considers the limits of the human mind: attention, memory, response time, coordination, emotions, patience, stamina, knowledge, subconscious, and so on. If you ever find a UX practitioner sacrificing accessibility on the altar of so called “good experiences”, you are dealing with incompetence.

expanding on 1. Natural Mapping:
user interfaces typically “map” to the system they control, each button and dial corresponding to some element of the system. Natural mapping is when the interface forms an obvious spatial relationship to the system, such as 4 stovetop dials that are in the same arrangement as the stovetops. the anti-pattern is arranging controls in an arbitrary order with no spatial correspondence to the system.

2. Visibility of System State:
Software typically has state (to state the obvious), such as “where” you are in the software’s menu system, what “mode” you are currently in. whether your work is safely stored on disk or has “unsaved changes”, what stage of a process you are up to and how many steps are left. Failure to effectively communicate system state to the user is inviting them to get lost and make mistakes. counterexamples: setting the time on a digital wrist watch, programming a VCR

3. Discoverability
this is about making the possible actions in a system visible- or if not immediately visible, the mechanism of their discovery should be visible and consistent. For instance, the menu items in a GUI system are discoverable. the available commands in a unix system are not. the opposite of this principle is “hidden interface”, examples of hidden interface are rife in iOS: tapping the top of the screen for “scroll to top”, shake to undo, swipe from edge for browser back- etc.

4. Constraints and Affordances.
A constraint is something that is not possible in a system. an affordance is something that is possible to do. which is which should be communicated clearly- the nature of this communication breaks down into three subcategories:
a. physical:
visually obvious from the shape of objects in a system- two lego bricks can only snap together in a limited number of ways.
b. logical: what’s possible or not makes sense logically: e.g. color coding,
c. cultural

constraints and affordances is at the heart of the “flat design” vs. “skeumorphism” debate. the benefit of skeumorphic interfaces is that replicating the look of real world objects like buttons, provides a natural way to communicate interactions. where skeumorphism went wrong is communicating false affordances: a detail in the ios6 calendar app hinting that pages could be torn out- when no interaction supported it.
flat design throws the baby out with the bathwater. we still need real buttons.

5. Habits and Spatial Memory
this is mostly about not arbitrarily moving around.buttons in an interface. people are creatures of habit, and if you fundamentally change the method of performing a task for no good reason, it’s not a “UI revamp” it’s pointlessly frustrating your existing users.
for spatial memory, millions of years of evolution have left us with mental machinery for remembering exactly *where* something is physically. you can take advantage of this in UI with persistence of space.

an example of this persistence of space concept is the meticulous way some people curate their phone’s launch screens. even better would be if iOS allowed a different wallpaper for each page, and for icon grids to permit gaps anywhere instead of forcing them to sort left to right, top to bottom. the different look of each screen could then be very personal and memorable. Finding an app, then, a matter of finding the page with the right color and shape.

6. Locus of Attention
this is a recognition of the fact that human consciousness is single threaded. that while parallel processes permit us to do things like walk and chew gum at the same time, there is only one thread of processing that represents our conscious awareness. therefore, interfaces that expect our attention to be fully present in the status bar, the cursor, the flashing banner ad, the address bar, the lock icon, the autoplaying video and the notifications are misguided.

7. No Modes
A Gesture is an action (a keystroke, a mouse move) expected to result in some effect (a letter being added to a document, a cursor moving).
A mode changes the effects associated with some or all gestures. caps lock is a mode. “apps” are modes. Modes are bad if they result in modal error: the unawareness that a mode has been activated, resulting in unexpected effects, and possibly unawareness it *is* a mode, or how to get out of it. VIM is prime offender. so are modern TVs.

@zensaiyuki Can you expand on what you don't like about modern TVs, so I can avoid replicating it in my 3rd browser?

For the record I don't personally have one, and when my family give me the remote to theirs' I typically go to the browser or a USB stick I've just plugged in. Hence why I want to make my own smart TV browser.

I think you can guess I don't like the distribution channels for mainstream entertainment...

@alcinnz it’s not a matter of personal “like” or “dislike”, it’s watching my grandmother’s personal triumph over finally mastering the ability to control one. In the road toward that, a common episode is accidentally pressing the wrong button which put the tv into some mode, leaving her with no frame of reference for how to get out of it. enough episodes like this can make people afraid to touch the remote control at all.

@alcinnz i mean, if you’ve never has a problem figuring these things out it can be very hard to empathise, but remote controls have a *lot* of cryptically labelled buttons. if you don’t already know what every one of them does, it’s impossible to know which to press in any of dozens of possible situations. it’s a bit of a bandaid, but one of the best things apple phones used to have is a “home” button, which would always do the same exact thing no matter when you pressed it. pissed it’s gone.

Follow

@alcinnz modern home entertainment systems can’t easily work around this problem either, because of the multiple inputs and the input mode selector, there is no single computer in control of the entire system, and so switching input modes is. the only way to, for instance, switch away from the nintendo game so you can watch Home and Away.

@zensaiyuki You'd hope this would get better again with "smart TVs", but from what I can tell "streaming services" won't let them.

I guess that's what "Vodafone TV" is about.

@alcinnz what would be good is to get rid of the concept of “inputs” and “menus” altogether and assign all that shit to numbered channels.

@alcinnz it’s not necessarily the best *possible* solution, but “channels” is a concept people already get. if the nintendo switch is just on channell 95, grandma doesn’t need to learn about input modes to watch her stories. she already knows how to change a channel.

@beadsland @alcinnz it wasn’t necessarily a better world, but it was simpler to understand.

@beadsland @alcinnz i just had the dorkiest idea. suppose you have a TV you designed where everything, including menu screens and whatnot are assigned to a channel. the remote buttons are

ch + -, vol + -, power, Z.

pressing the Z button switches to channel Z, which displays nothing but static.

@zensaiyuki @alcinnz For the edification of those of us who miss that artefact of pre-digital television?

@zensaiyuki @alcinnz It would require that the TV include an antenna. Simulated static wouldn't be the same.

@beadsland @alcinnz we nerds can tell the difference between true random and pseudorandom

@alcinnz smart tvs are just a worsening of the problem. more complicated modes and menus. the problem that TV Menus have (and the web itself for that matter) that traditional GUI menus don’t, is TV menus have no sense of space or position. You are instantly teleported from point to point and “where i am”, “where I came from”, and “how to get where I am going” is state that you need to hold in your head. you don’t get a map or compass.

@alcinnz it’s easy to think that this is a generational thing. but, I’m 38 and already feeling my ability to navigate these spaces slipping away.

@alcinnz it’s kinda goofy looking if you’re used to “normal” websites, but I see a lot of potential in things like Prezi, where you have the exact same content as a normal slide presentation, but every part of it has a position in space, and you can always zoom out to see the shape of the entire system, and where you are within it. human brains were built for that.

@alcinnz channels is a sort of cheaper version of that. you can’t “see” the shape of the whole system, but you know it’s a closed loop and you can always find what you’re looking for if you pick a direction and keep walking until you find it.

@zensaiyuki Can't say I fully know to address this problem with The Web, but tree-style history seems like a good step in the right direction. I'm planning to implement that as a (ironically) seperate mode.

From my experience creating a WebKitGTK desktop browser I get the impression existing browser engine embedding APIs and SPAs are frustrating these explorations...

As for Smart TVs, did I mention all I want is to rewatch & relisten to things I've already downloaded?

@alcinnz Jef Raskin’s proposed solution was to put a tiny thumbnail of the destination webpage next to each link. clicking on the link (or thumbail) then zooms the view into the thumbnail, and the thumbnail becomes the real webpage after it loads. going “back” zooms out.

@zensaiyuki It does make perfect sense to have some sort of transitions between pages to establish a spatial metaphore! Especially with a need to communicate that loads are happening.

In the context of TVs this would resemble the menus on DVDs, but I'd NEVER be able to pull off transitions that elaborate!

I'd probably combine that animation with a slide right in reference to the tree-style history UI.

@alcinnz right. my problem with it is that a thumbnail small enough to fit next to a link is too small to make anything useful out about it, other than vague color layout. There was a demo of this as a flash movie on raskin’s website once too. the zoom animation is a little nauseating if you’re motion sensitive.

the browser I would build if I had the skills, would merge “new tab”, “new window” and “navigating in the same window” into a single concept. for conversation i’ll call it “new card”…

@alcinnz clicking a link would generate a new card that would visually slide over the top of your current card. you’d still see the left edge of the previous page. clicking on it would be equivalent to the back button, sliding the new card to the right, but leaving ITS left edge visible as a “forward” button. zooming out would reveal stacks of cards, each representing previous browsing sessions.

@alcinnz tree history would be a bit tricky to do with this, but i imagine it wouldn’t be much of an issue to just handle this as linearising the tree into the stack. if that makes sense. going “back” and clicking a different link adds a new card between the current one and the cards above. maybe offset sligjtly up or down.

complicating the model is state, like partially filled out forms. implementation wise i’d want to build a bullet proof tab hibernatation system that would avoid reloads.

@alcinnz this is not entirely dissimilar to how mobile safari works, except that it does certain things to make the model useless for the things i wanted it for in the first place. for instance, you can swipe left or right for back and forward, but there’s no visibility into where you’re going. i can pull the edge slightly to peek and change my mind. but the gesture is invisible: I only ever activate the gesture accidentally.

@alcinnz desktop safari lets you zoom out your tabs, and see the history of each one as a stack. but 1. performance is terrible. zooming out a lot of tabs brings my system to a standstill. don’t see why this should be the case if the browser was caching thumbnails as you browse, it just needs to display a grid of thumbnails! why is it slow?

i also think the stacks should be arbitrarily movable and groupable. zoom out space could have post its and colored regions.

@alcinnz because zoomed out tabs and history should be the same thing. the same space. I will not be shamed for opening 3000 tabs. I should be able to browse with impunity and the computer should be helping me organise my stuff.

@alcinnz i just realised that mobile safari does this one other thing that seems obviously inspired somehow by the raskin proposal. “deep touching” the “here” link brings up a preview of the webpage and gives you an opportunity to back out before commiting to a “real” navigation. it’s not *quite* how i would have designed it, but it’s almost there.

@alcinnz and again, the problem is deep touch to activate this is somewhat hidden interface. you have to either activate this by accident or just know in advance. i don’t really like the way iOS pushes me into stumbling around accidentally through its interfaces. it doesn’t engender a feeling of being in control.

@zensaiyuki That's *pretty* much what I was planning! Thanks for suggesting refinements!

Though I wasn't planning anything regarding browser sessions, beyond what comes naturally from placing an address (and bookmarks) on the homepage/root of the history tree. I guess I have space to add it!

Not sure about supporting editing these piles on a smart TV though, sounds like one mode too many. It's better on a laptop with the drag quasimode.

@alcinnz yeah too much for a tv. i was speaking to desktop safari. and i realise it’s hard to implement- more of an aspiration really.

@alcinnz so here’s a typical sony TV remote. we have: two tv’s fukin’ (input selector?), and “I slash pumpkin” (power?) tv pause. (which probably doesn’t pause the tv), grid world, 3D? is this a 3D tv? TrackID, a failed shazam competitor that gets its own button that opens the tv browser to a webpage that says the service is shut down. VCR controls that i was surprised to find work when i use the playstation with streaming services! but not with any other device. four color buttons… ! ?

@alcinnz i found out the color buttons are for teletext. who knows about that except for finnish and british people? i-manual opens a confusing and useless “online” instruction manual mode. after pressing this, it *does* say on screen you can press “return” to get out of it. this assumes though, that the user hasn’t been sent into a panic and is thus calm enough to actually read what’s on the screen. most of the other buttons in this region do similar panic inducing modes.

@alcinnz below that is a big fat region of numbered buttons my dog enjoys pressing. my tv isn’t hooked up to an antanna so all it does is set the tv to a deafeningly loud static channel which sets me to a panic. i can respond by turning the tv off, figuring out which input mode it was in before and painstakingly toggling through them, or simply hit the mute button which i guess is on here somewhere.

@alcinnz and just above the buttons is a picture-in-picture button, which sets the tv into a mode *I* don’t know how to get out of. “return” doesn’t work. the only way is to remember which button it is to press it again.

@alcinnz in principle something like this *should* be simpler, but it doesn’t have volume controls on it, which are rather important. it also doesn’t eliminate the need to deal with the previous remote, to switch between the apple tv and the playstation. The TV by the way, has a serial port, and a documented serial communications protocol. i’ve often fantasized about using that to build a modeless tv remote- something where I could say, press a netflix button and it knows what input mode to use

@alcinnz and then uh. navigate the apple tv to the netflix app? it’s problematic because encoding a specific button sequence to get to a specific place on one of the devices isn’t possible. it’s a different sequence depending on where you’re starting.

@zensaiyuki Which, as you said, is the whole problem with modes. Too much context to figure out.

@alcinnz yep, and it turns out some of the same stuff that makes it hard to automate with scripting, say, an IR emitter, also makes it harder for humans to navigate.

@alcinnz if i am a magic remote, i need to somehow ask the tv what mode it’s currently in. if i am a human holding a non magic remote, i need to do the same thing with my eyes and ears, and frankly, it sucks.

@alcinnz incidentally, even if I did have an antenna or a cable system hooked up, the number buttons are still terrible for accessibility- since they put a time limit on my reaction time. if I don’t punch in a multi-digit channel number fast enough, I am penalised by being forced to first confirm the tv is receptive to a new number, and trying again, this time with loud static being bellowed at me.

@alcinnz this surprised me about the Australian telephone system too. calling someone on a landline here always stresses me out. if I take too long getting through a number I get interrupted by a voice telling me I’m invalid. the USA landline phones give me as much time as I need.

@alcinnz the first time sent me into a panic too. the australian dialtone sounds identical to the USA ring tone. I felt like I was being sent straight through to the prime minister the second I picked up the handset.

@zensaiyuki Those are tricky to find a use for without falling into the same trap.

Right now I'm thinking of having them skip to particular screenfulls of the page.

@alcinnz you could improve on the situation by doing a huffman encoding - like scheme and including a clear buttons. e.g. all two digit numbers start with 6-9. all 3 digit numbers begin [6-9][6-9], such that no N-digit number has a valid (>N) digit number as a prefix. and including a clear button to back out of the number entry at any time if a mistake is made, including completing a valid number, which would make it effectively go “back”

@alcinnz this is why a home button is so valuable. if you have a home button, you CAN have something like a phone number for each place you need to get to. just begin each with “home”

@zensaiyuki @alcinnz

these are the funniest descriptions of a remote i've ever seen

teletext, though...
"wow, I never knew there was such a thing as TUIs for tvs"

@zensaiyuki Oh yeah, the four colour buttons! They seem to have become a staple, despite how terrible of a design they are.

I'll probably find a use for them, though I'd prefer other buttons like "i" when available. And as always, the usual back buttons will work!

Sign in to participate in the conversation
Mastodon

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!