Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube

UI / UX / Design (Web apps)

Owned by Nathan Wailes
Last updated: Sept 15, 2018
10 min read

Table of contents

Child pages

General

UX / UI Websites

General resources

Articles / Videos / etc.

  • 2017.11.01 - Twitter - patio11 - Tweetstorm on US/Japan IRL/Web UX
    • Japan IRL UX (good):
      • What:
        • if you found literally any gov't in America as efficient as Ogaki City Hall, surprising.
        • I was done in 25 minutes. 3 minutes with greeter, 10 minutes with forms, 3 minutes with each of 4 adjacent bureaucrats who passed me along.
        • "Mr. McKenzie congrats on joining national health insurance, here's your card. This is your first time on it, right? Want explanation?"
    • Japan web UX (bad):
      • What: 
        • Think of every annoyance you've ever found in any shipping application. Forms which clear all inputs on an error. Ridiculous timeouts.
        • Office hours. Unclear instructions. Telling the user to do things a computer would do better, like formatting input to match a regexp.
        • Non-sensical browser restrictions, invariably to an old version of IE. Proprietary authentication schemes. No design, functional or visual.
        • Take all of the problems you've seen in the set of all American web applications. Take the union of them. Cross-apply to all Japanese apps.
      • Why:
        • Deeply entrenched reasons. Most apps are built by systems integrators. Huge skills gap in dev population. Devaluation of devs generally.
        • Large (shrinking) install base of legacy phones w/ unique UX requirements and lowest-common-denominator apps by purchasing decree.
        • Decisionmakers for purchase/implementation are often not merely not technical but Deeply Not Technical; not routine computer/etc users.
  • Building a Princess-Saving App
    • Rec'd by Patrick Collison here

Courses / Tutorials

Colors

Tools

Icon / Logo

  • Kevin Systrom used something called "shape layers" and "shading" in Photoshop to create the first Instagram icon (Source).
  • The second Instagram icon was created with the help of a user. (Source: An answer by Kevin on Quora)

Hamburger menu

  • 2015.04.27 - Luke Wroblewski - Obvious always wins
  • 2015.07.31 - James Archer - The hamburger menu doesn’t work
    • rec'd by Pieter Levels
    • Summary
      • This hamburger is made of mystery meat
        • Users often don’t know quite what they want, and they rely on site navigation to nudge them in the right direction by telling them what their options are and what content they should be looking at.
        • But with hamburger menus, a description of the pages that can be accessed through the menu are not visible until the user taps/clicks on the menu. (See Mystery meat navigation).
      • This hamburger smells like…nothing
        • Most people navigate based on what’s called “information scent.” When faced with a set of options, they’ll choose the option that gives the strongest indication that it’ll bring them closer to what they want, like an animal sniffing around for food. 

          When a user is looking for pricing on a website, they’ll look for words like “cost,” “price,” “rates,” “fees,” etc. They’ll scroll down the page looking for these words, then scroll back up. If they can’t find anything, they revert to plan B: look for words that might be a superset of pricing, like “sign up,” “product details,” “learn more,” etc. They’ll continue to expand the concepts they’re searching for until they either find something that looks promising, or they give up entirely.

          You know what never looks anything even close to what the user actually wants? A small three-bar icon tucked in the corner of a website.

      • This hamburger is consistently disappointing
        • Many companies have tried the hamburger menu and then switched away from it.
          • Facebook, NBC, Spotify.
        • A better alternative for mobile is a list of options at the bottom, Instagram-style.
      • What about variations on the hamburger?
    • My thoughts
      • It seems to depend on whether users are familiar with the hamburger icon or not. If they are, it doesn't seem to me to be a big deal.

Examples

  • YouTube for Desktop - 

Modals / Pop-up windows / Dialog boxes

  • Thought: one of the main considerations for whether to have something as a no-other-actions pop-up (like PyCharm's "Settings" modal) or as part of the permanent UI (like PyCharm's "Project" sidebar) or as a other-actions-allowed pop-up (like Photoshop's various tool windows) is whether or not the user is likely to need to switch between the actions in that pop-up and the actions in some other part of the UI. A "save" or "load" action doesn't require interacting with the rest of the UI, so it can be in a pop-up that disables other actions.

Scrollbars

Tools

Examples

  • Confluence
    • Darker on hover, no change on active, and nothing for the tracks.
    • As I write this there's a bug where the vertical scrollbar won't even let me select it, because the sidebar's expand/collapse clickable area overlaps the scrollbar's area.
  • YouTube
    •  ← The sidebar has a very thin scrollbar that pops up when you mouse-over the sidebar.
    • The main window scrollbar behaves the same way: it pops into view when you mouse-over the main window.

Wizards / Assistants

Examples

  • Facebook
    • Set up "Log in with Facebook": 

Advice

Title (head)

  • The format to use seems to be: specific → general
Examples
  • Confluence: <Page title> - <Space title> - <Website company name?>
  • Gmail: <Email name> - <Your email address> - Gmail
  • Genius: <Artist name> – <Song title> | Genius Lyrics

Upgrade / 'Go Premium' / Pricing pages

  • RescueTime

Reset password

  • Give the user a clue about what email address you're sending the reset link to.
    • Examples
      • Instagram gives you the first letter of your email address's username, the first letter of the domain, and (apparently) the number of characters in the username and the domain.
        • So, "hello@gmail.com" would be displayed as "h****@g****.com".

Which size units to use

Screen resolutions to test

Require as little input from the user as possible to provide the user with the desired output

Using solid, strong colors to draw the user's attention

  • Gmail → 
    • Notice how there are only two areas on the page where they use strong colors as the background: the 'Compose' button and the 'Search' button. And those are really the two most-common actions that a person would be expected to take (aside from reading the list of emails and clicking into one of them). It reminds me of how I would underline the key phrases in my resume to draw the reader's attention to them more quickly.
    • Contrast that with this: , where there are three elements with strong solid-color backgrounds. The selected-template doesn't even correspond to an action that the user would take from this screen, so it seems to go totally against what Gmail did. And I don't think users will be clicking 'Delete' so much that they'll benefit from having such a strong visual guide to that element. I think the 'Save' button makes sense; that seems like a button the users will be clicking a lot from this screen. I think it might also make sense to just have a single 'Add Template' button instead of several of them, and to make that element have a strong solid background.

Show how the user compares to other users as a gentle push

  • LastPass → 
    • I like how it tells me how I stack up against other users.

Things that can make your website look like crap

Many times in the past I've had the frustrating experience of looking at a website I've created and saying to myself, "This looks like crap, but I don't know exactly why, and I don't know how to fix it."

  • There may be too many colors
    • Look for every possible source of color and try to get rid of colors until you only have like 3 or 4.
      • Even small things like the borders on textareas and inputs, and the colors of buttons, will contribute to a general sense of "this doesn't look good" if they don't match the 3 or 4 colors you want to use.
  • You're using standard fonts (Times New Roman, etc.).
  • Needing to scroll down to find the main content of interest on a page.
    • Examples:
      • Yahoo Answers: 
        • I need to scroll down to find the answer on a particular page.
      • SENS.org

Design philosophies

Rich design

  • ...

Flat design

Minimalist design

Examples

Brutalist design

Related websites

  • BrutalistWebsites.com
  • BrutalistFramework.com (Satire)
    • When thinking of brutalism, think CRUDE:
      • Cynically confrontational
      • Roughly raw and rugged
      • Uncomfortably ugly and unpolished
      • Deliberately daring and damaging
      • Extremely exasperated and embittered
  • UX brutalism (Satire)
    • Forget seamless experiences. The Brutalist UX Framework™ creates rough edge moments that will make your users love you. A new type of experience based on neglect, and on user affinity caused by brutality.
    • The first (and only) step is to throw elements on the screen, without worrying too much about how they work together. Who are you to define hierarchy anyway? Let each element fight for the spotlight.

Articles / Videos


Typography

Books

  • The Elements of Typographic Style
    • Kevin Systrom was reading this book in the earliest days of Instagram. One of his earliest photos shows a page of the book. His comments: "Sunday reading / Elements of typographic style. Pretty popular book... Just only starting to understand this stuff"
  • Thinking with Type
    • ThinkingWithType.com
    • Kevin Systrom was reading the sample chapters on the website when Instagram was first getting started. He had a photo featuring the book.

Website Designs I Like




Follow me on Twitter