Versions Compared

Version Old Version 41 New Version Current
Changes made by

Nathan Wailes

Nathan Wailes

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Child pages (Children Display)

General

UX / UI Websites

...

  • 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

...


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

...