Teaching the visual language of user interfaces to novices

July 7, 2016 9:38 AM

I'm looking for resources that explicitly lay out what probably has a more technical name but what I think of as the generalized visual language of most modern UIs (especially as pertaining to web design). My goal is training computer-illiterate/technophobic people to be able to recognize common UI elements across multiple websites and applications. Specifics inside.

A big part of my job is being a technical trainer for a demographic that is both highly intelligent and not at all technical (university professors--specifically university professors that seek out my help, which is a self-selecting group of people who have a lot of problems using computers). Also my dad, who coincidentally is also a not-very-technical university professor.

My dad sometimes acts as a little focus group (n=1) who I can talk to more openly about these things than my clients, and he agrees with me that a big difference between myself and him (neither of us grew up using computers, we both learned them as adults) is that I understand the visual language of modern GUIs and he just straight up does not. It's a continual struggle for him to do anything on a new web site or app because he hasn't been able to generalize how (most) user interfaces function and each one is like this whole new terrifying universe. I know that this is something that holds back a lot of my clients as well. When presented with a new, interesting, exciting site or app, they can't get excited about how it could help them, because they're just groaning over "omg I have to learn how to use this whole new thing???" To me, these sites and applications aren't all whole new things, they're things that are 80% the same as every other thing, so I only have to learn something that's 20% new.

So, probably tilting at windmills here, but I would love to create a series of short videos that explain this visual language and provide examples so that viewers can see how so much of what they do on a computer uses versions of these same elements. But I'm not a UI designer, so I don't really know where to begin.

posted by soren_lorensen to Computers & Internet (12 answers total)

Best answer: I've done this, and it was really eye opening to look at things from the perspective of a naive user. That experience caused me to develop a peeve for people calling any technical interface 'intuitive.' None of it is intuitive.

Fortunately, your guys sound like they know how to use a mouse and basic things like that, so you'll be able to focus on specific design elements.

Still not easy, though, and not standardized across the board. Various organizations do publish explicit style guides to their own UIs, but they're fussy, they're all different, and not everyone writing for those platforms even complies. (Actually, most don't in my limited experience.)

So probably the most useful ones are going to be unofficial guidelines such as the ones described here, based on real-life applicability.

So maybe just describe basic things like "The hamburger is a menu, usually somewhere in the header" "The company logo usually takes you back to the home page," "Search is usually near the top," and take them through various implementations and exceptions to the rules so they can get a feel for how designs look in real life.

And let them know they are perfectly justified in getting frustrated sometimes. There's a lot of really bad user design out there.
posted by ernielundquist at 10:41 AM on July 7, 2016 [3 favorites]

Best answer: The book "Don't make me think" comes at it from the other end. It is aimed at website makers (who may not be trained designers, they just have a website they run for some reason). But it might give you some useful information to get the ball rolling.

If you Google "Don't make me think PDF" there are apparently downloads of older versions available online.
posted by Michele in California at 10:49 AM on July 7, 2016 [2 favorites]

Best answer: Google's Material icons provides a good discussion starter and reference for part of the problem. Among hundreds of icons there are those that are so situational and connected to physical activities that they are easy to grasp, but also those that the most ubiquitous and asbstract. (e.g. 'share', 'close', 'copy'). These difficult common ones make more sense when presented in this context, as attempt to give graphical shortcuts for specific activity, but with the difficult ones the activity has only distant relation to anything physical. The difficult, common ones should be the focus. There is also the benefit that Material icons are very common in wild.

If I would make such a video, I'd use pieces of cardboard to present the overlapping windows, tabs etc, to show how the references of of navigation and window manipulation elements should be understood.
posted by Free word order! at 10:53 AM on July 7, 2016 [1 favorite]

This might be helpful.
posted by kevinbelt at 11:02 AM on July 7, 2016

The technical name is "beginners" , i.e. people who are coming to a new class in language or any other serious subject without previous experience.

Instead of going right to the icons, I would spend efforts in showing the basic structure of apps, websites etc.

I like the idea of a video with cardboard , too.
posted by Oli D. at 1:02 PM on July 7, 2016

I agree with don't make me think as a terrific resource.

For a mindset framework, Stanford has a Human Computer Interaction (HCI) group that is great and distributes courses and videos for free.

Other resources that may be helpful:
- Edward Tufte
- Fontawesome
- Noun Project
- Smashing Magazine has a good series of books.

Good luck!
posted by Fierce at 1:57 PM on July 7, 2016 [1 favorite]

Best answer: I would relate it to a concept they are already familiar with: books. There are elements they expect to find in books (table of contents, publisher info, index, title page, chapters, figures, even the conventions of opening at the right and turning pages and so on). Each book might leave some of these out or put them in slightly different places, or use different fonts, but they are fundamentally structurally similar, and for good reasons (user expectations, ease of production, etc). Same as websites. Professors have achieved visual literacy with books to a degree beyond what most other people have and so they can learn the visual language of websites too. In fast, there are lots of interesting academic articles about the history of web conventions and even some comparing and deriving elements from book conventions. Your audience might like geeking out with some of those. Ask a friendly university librarian for suggestions.
posted by lollusc at 2:26 PM on July 7, 2016

Best answer: sort of related:
https://xkcd.com/627/
Donald Norman's Gulf of Execution & Gulf of Evaluation
posted by at at 3:26 PM on July 7, 2016 [1 favorite]

Best answer: Your dad is not alone; Kate Meyer of Nielsen-Norman has shown how “flat” design (the recent term for a particular trend in obfuscating UI design) is just as difficult for younger users as for older or less experienced ones:

Young adult users seem to rely heavily on hovering as a strategy to determine clickability. When asked how she knew what was clickable on web pages, one user said, “By scrolling over it… then you know. Otherwise I actually don’t know. Some stuff you assume. But it’s nice when links are bolded and you can tell. […] It’s hard when you think something's a link and it's not. And you have to figure out how to get it another way.”

Another young adult user responded to the same question with, “I don’t [know what’s a link]. I just start clicking and praying that it works.”

I think you can help somewhat, but the strategy I’d offer focuses on low-risk exploration. Even native users of many modern interfaces are winging it every day, feeling comfortable trying things out by smell and by touch.
posted by migurski at 11:14 PM on July 7, 2016

Even native users of many modern interfaces are winging it every day, feeling comfortable trying things out by smell and by touch.

i think that's a key point. i'm in my mid-30s and hopped on AOL when it came out. I, and many of mine and younger generations, aren't afraid to just click stuff to see what happens. because you can almost always undo. i've found that older generations aren't as fancy-free with their clicking and fussing around, because they don't want to "break it". i learned everything i know by just "seeing what happens" (and of course google and lycos before it). perhaps emphasize that almost nothing they do in an app is going to break it or cause irreparable damage.
posted by misanthropicsarah at 12:13 PM on July 8, 2016

Computer Science Unplugged has a section on Interface Design: Activity 20, pages 205-217. Some of the exercises might be fun and help the the novices into the mind set of "Someone's trying to communicate with me via this limited medium...". For example, there's an exercise to design icons to represent various tasks.
posted by at at 1:44 PM on July 8, 2016

i've found that older generations aren't as fancy-free with their clicking and fussing around, because they don't want to "break it". i learned everything i know by just "seeing what happens" (and of course google and lycos before it). perhaps emphasize that almost nothing they do in an app is going to break it or cause irreparable damage.

I have also noticed this exact phenomenon, except that, as someone in my 50s, I have a slightly different perspective on this and on the characterization of 'digital natives.' I'm not technophobic at all, and I'm perfectly capable of fixing things I and others break.

I am, however, reluctant to agree to or use a lot of products where I don't think the convenience is worth the cost of privacy and security. So I'm not going to install a flashlight app that wants access to my contacts and my location, but I have seen exactly that on other people's phones. And I'm always annoyed when some young person assumes they just naturally must understand technology better than I do and start baby-talking me about it, especially when they just let some shady app developer scrape their contacts in exchange for an LED toggle switch. "Digital natives" are dumb about technology in their own ways.

And I have an enviable email address that contains my first name, which fell strongly out of favor by the 70s, so most people with my name are women in their 40s and 50s. However, of the many, many people who mistakenly give my email address as theirs, the vast majority of them are in their teens to their thirties. And they give it out a LOT. I have social security numbers, phone numbers, addresses, employment information, I get receipts for their shopping, and no shit, about half an hour ago, I got a (legitimate, but not intended for me) $100 money transfer. I think it's for the 30-something woman whose detailed phone bills I get every month.

So I do agree there's some generational difference in the way people approach technology, but the reluctance to click around and try things isn't always based on irrational fear. They're not always wrong.

Introductory classes on using the internet and things like that always seem to warn you about the dangers of hacking and viruses and individual bad actors, but they gloss over the 'legitimate' companies like Google, Facebook, and the vast ad networks that are collecting, collating, datamining, and selling your personal information and that of your friends and family. And that is a serious oversight, IMO.

So I think you can probably address their concerns without dismissing them entirely.
posted by ernielundquist at 5:15 PM on July 8, 2016 [2 favorites]