Tag: design

Recap: Brad Colbow - It’s the little things

Last week we were lucky enough to have Brad Colbow talk about designing interfaces for mobile devices. Brad has extensive experience explaining usability and produces a Web comic called “The Brads.”

The Presentation

Notes from the meeting:

  • Brad works from home and has a specific routine that he follows every morning. One day that routine was interrupted because his daughter was having friends over. So he decided to work from a friend’s office which was quite some time away.
  • He decided that he would pass the time driving by downloading an audiobook from his local library. He browsed the website and found the book he wanted. He then went on to download the book and found the experience so frustrating that he made it a topic of one of his cartoons: Why DRM Doesn’t Work.
  • He loves to take dense mental model information and turn it in to a comic strip that anyone can understand
  • Brad’s day job was building magazines for iPad and iPhone. They didn’t have an iPad yet, so they started on the iPhone and thought they could scale up from there. They knew that magazines needed to be better digital than print. They started with the user interaction guidelines that are available for iOS, Android, Blackberry, etc.
  • What is the secret to creating a great user experience?
    • Looking at experiences they liked
    • Listed reasons and tried to figure it out
    • When you study a bad experience you can easily figure it out
    • What could they use as a bad experience? The Library
  • The little details matter
    • On the library website when you browse for audiobooks you see and can search the entire selection. But when you decide on one and are ready to download it you get an “Add to SelectList” option. What is a “SelectList?” It’s not even a real word..
    • In a real library if you can see a book on the shelf, you can check it out. That experience isn’t mirror on the library website.
    • Stuff like this is not nitpicking. It’s not the big thing that gets you, it’s all the little things that bother you over time.
  • Brad outlined some great user experiences, for example using Dribbble on an iPad. iOS will auto capitalize the first word typed, usernames are case sensitive, so when you login to the website you have to be sure the first letter of your username is lowercase. This is a minor inconvenience but because these two systems obviously have their own motivations it is justified. But the developers of Dribbble must have experienced this first had and added “autocapitalize=”off”” to their username field. It is these little details that make it such a great experience.
  • Brad then went on to outline a few UI differences between iOS and Android and why designing a single interface won’t delight the users of both OS’s. The users of each OS are use to a certain button placement and experience.
  • Some best practices
    • Don’t let the UI hinder the experience
    • Be Skewmorphic sparsely
    • Elevate the content people care about
    • Mobile websites are to do something one time and be done with it. Don’t put an ad on your site to download the app.
    • Avoid forcing the user to rotate the device
    • Don’t make up new touch gestures
    • Avoid help. If you need an instruction manual, you’re doing it wrong
      • If your app needs help, your app needs help.

Full presentation available at: https://speakerdeck.com/u/bcolbow/p/its-the-little-things

 

Recap: Web Design Process… More or Less

For our July meeting we were lucky enough to have Colleen Case and Maria Gosur from Schoolcraft College to talk about the Web Design Process.

The talk was about a framework for the web design process, taking 45 hours of teaching time and compressing it to 45 minutes. They discovered 40% of the population is re-tooling skills to the web, while 60% have grew up with the skills and looking for something advanced. Colleen is an interactive teacher, shifting from sage on the stage to guide by the side.

“The medium is the message”
- Marshall McLuhun, 1964

The content of the communications is blended with the medium. With the way it is sent, the interface is content.

Framework for team dynamics

  • Together everyone achieves more
  • It starts with a common vision
  • Creating a swing

Process (stages of development that are happening concurrently)

  1. Define the project
  2. Scope of the project
  3. Information architecture
  4. Build and integrate
  5. Site publishing

[blackbirdpie url=”https://twitter.com/philltran/status/91287274905546752″%5D

Define the project

  • Figuring out who is on the team and what they do
  • It’s important to define these up front

Scope of the project

  • Common vision, defining an audience, review the data, technical needs
  • Audiences can mean more than one
  • How do we talk to the audience as a human
  • Persona’s should have names and refer to them as actual individuals
  • How can we best deliver your content to your audience
  • The scope of a website doesn’t end when it launches, it stretches for years after.
  • You can’t jump ahead in the process

Information architecture

  • Looking at all the information and start recognizing patterns
  • Sticky notes are a great way to visualize information to recognize patterns
  • Chunking is grouping information
  • Queueing is prioritizing information
  • Filters is creating unique access for multiple users
  • Abstracting is creating a consistant look from page to page to orient the user and allow them to get around
  • Where does the complexity of the site lie? In the back end or frontend for the user?

[blackbirdpie url=”https://twitter.com/philltran/status/91291238355046400″%5D

Build and integrate

  • File management and naming conventions
  • Optimizing multimedia
  • Populating content
  • Site testing, not just functional but also the ascetics

Site publishing

  • Site Launch
  • Training, Updates, Maintenance
  • Debrief

[blackbirdpie url=”https://twitter.com/refreshdetroit/status/91297540523298816″%5D

Things often overlooked

Your client knows the problem. Design is problem solving.

The project manager talks to the client so there is a single voice and ears for the entire project. One person can have multiple roles.

The content expert might not always be client. Writer/Editor. Usability Testing, Information Architect. Technology Researcher.

Visual designers are the person on the team that everyone’s favorite. Photographer. Illustrator. Multimedia Designer. Bringing the illustrator in early on can yield a lot of illustrations that explain the process to get everyone on the same page. It can expand understanding.

Technical designers look at everything that makes the website possible. Database developer. IT security specialist.

Usability designer. Test/focus group coordinator. Search engine optimization manager. Social media manager. Site analytics. Transition coordinator.

We consume web content as snacks, not meals. We scan, pick and choose what to interact with.

More Information: http://designprocessmoreorless.com/