business transformation through web technology

Notes From Ryan Singer's "UI First" Presentation

| Comments

MODELING

  1. Begin with modeling
  2. Screens need language.
  3. Typical programmer screen: Lot’s of function, no explanation. No verbs. No sentences.
  4. Start with a model that works for both the implementation and the customer. “Ubiquitous language”

SCREENS

  1. Which screens - REST conventions do a lot of work for us - what is the logical name of the noun-verb combination?
  2. What’s on them - design from the inside out. Just the content without the outer frame of navigation. What matters to the user of the screen. What are they trying to do? Put in words what things they are trying to do on the screen, including the various paths they may take. (Don’t just assume the page should be a standard REST-template form.)
  3. Visual style & tricks - be completely rational, “don’t make me think” - when i see the screen, I instantly know what to do with it, it’s easy to complete the task.
  4. Least effective difference - give things visual priority, doing just enough to create the hierarchy

FLOWS

  1. Think with actions instead of screens
  2. Every action has 3 screens:
    • How you get to it
    • How do you do it
    • What happens afterwards - how do i know it worked. What do i want to do next?

TEMPLATES

  1. No HTML in helpers
  2. No clever builders
  3. CSS/JS follow same REST-inspired naming conventions (action-specific blocks in each file)
  4. Treat ERB like an image tag (i.e. small, maybe calling a helper, etc.)
  5. Use helpers to reveal intention.

Comments