How many times do you work on your computer during the day? What about your tablet? How often do you pick up your phone to do a quick internet search or find a store nearby? Do you play on your phone while watching TV?
Google asked these questions in their study "The New Multi-Screen World Study: Understanding Cross-platform Consumer Behavior," published in 2012.
Why am I talking about this on a UX blog? Because there are some incredibly valuable lessons to be learned about when and how people view your website/app/thing-you-designed-to-be-viewed-on-a-screen.
Perhaps, if you are an inquisitive geek or fond of history, you have heard of Dr. Grace Murray Hopper. I think I may have heard the name in passing at one time or another, but the name didn't mean much to me until the other day when I read a section in this book to my daughter:
Girls Think of Everything: Stories of Ingenious Inventions by Women
Wherein I realized that Grace Hopper is the most awesome role model ever for a woman following her dreams in the user experience field.
During Aquent Gymnasium's Coding for Designers, the instructor often encouraged us to expand on and practice ideas presented in the class. One assignment was to code the home page for a restaurant website based on a Photoshop comp. Not only did we practice creating pixel perfect CSS, we also learned and experimented with Twitter Bootstrap and Google Web Fonts.
The extra credit assignment for this assignment was to invent our own restaurant and design a Photoshop comp for the desktop version of the home page. Then we had to code the website utilizing Twitter Bootstrap and Google Fonts.
Happy 2014! Want to learn something new? Try a free online course!
I've participated in several during the past year. What I've noticed is that online courses have different goals and different audiences depending on the source. Thus you'll get different things out of each one. Here's an overview of the courses I took. See what works for you.
This is part seven in my series about the Human-Computer Interaction course I took through Coursera. Read all my posts for the full story.
Assignment 6 User Testing
Now the final pieces fell into place as we created test materials and recruited participants.
This is part six in my series about the Human-Computer Interaction course I took through Coursera. Read all my posts for the full story.
Assignment 5 Ready for Testing
Goal of prototype
The goal of the mobile app is to simplify vehicle maintenance tracking. Specifically, this prototype focuses on the procedure for entering mileage at the time of filling up the fuel tank.
Before moving forward on our high-fidelity prototypes we needed to enumerate the issues found during the heuristic evaluations.
This is part five in my series about the Human-Computer Interaction course I took through Coursera. Read all my posts for the full story.
Assignment 4 Start Building
In Assignment 4 we began the process of creating a high fidelity prototype based on one of the wireframes we made in Assignment 3. I selected CarBuddy prototype 2.
But first we needed a plan--a development plan.
This is part four in my series about the Human-Computer Interaction course I took through Coursera. Read all my posts for the full story.
An important part of this course is the peer review and self-evaluation process. If you take the process seriously you can learn a huge amount by evaluating the work of other students as well as your own work. Each assignment has a grading rubric to help you figure out what kind of feedback to give and how to score.
The peer review and self-evaluation process for Assignment 3 Wireframing also gave us a chance to practice a common UX technique: heuristic evaluations.
What are heuristic evaluations?
This is part three in my series about the Human-Computer Interaction course I took through Coursera. Read all my posts for the full story.
Assignment 3 Wireframing
After choosing a concrete direction (Mary Jo's Storyboard in my case) we jumped into the process of prototyping by creating two rapid interactive wireframes that varied in interface, but offered the same basic functionality.
The process of rapid prototyping involves producing your ideas quickly and testing them. Confirm if your designs work as planned. Based on what you learn from those tests make more designs and refine previous ones. Test more. Refine and adjust. Test. Repeat again. Iteration upon iteration to improve and refine the design.
This is part two in my series about the Human-Computer Interaction course I took through Coursera. Read all my posts for the full story.
Assignment 2 Storyboarding
For assignment two we found design inspirations and decided on a point of view / high-level design strategy:
As I mentioned previously, during April & May 2013 I participated in Scott Klemmer’s Human-Computer Interaction course from Stanford Online.
In this course, you will learn how to design technologies that bring people joy, rather than frustration. Helping you build human-centered design skills, so that you have the principles and methods to create excellent interfaces with any technology. (more)
Over a series of posts I'll share some of my coursework with you. This is the first of the series. Read them all!
Recently I found myself helping a friend who was stuck while trying to write the cover letter for a job application. Now I know she's not the only person to have writer's block in this situation. After stumbling around for a while I came upon a solution that will hopefully help you as well:
Write a persona for the recipient of the cover letter.
Recently I found myself on the hunt for a new-to-me used car. After researching at places like Edmunds and Kelly Blue Book I proceeded to scour car dealers' websites for my preferred makes and models. Since this was my first time buying from a dealer I had a lot of questions. The questions I started out with were about the cars.
The questions I ended up with were about the websites.
For example, I selected a car from South Point Hyundai's list of used cars and saw:
Hyundai Screenshot
This is a partial list of questions I had while looking at the page:
Hyundai questions
The questions I had about the page as a car buyer fell into two general categories: how can I find information about this specific vehicle being offered (features, price, etc) and why are there different buttons and links that seem to be the same thing?
Now I assume that the goal of a car dealer's website is to get you to come in person to see the car you want and then, depending on the specific dealer's philosophy, possibly up-sell you to a newer, more expensive car.
Here's my redesign to address my questions as a car buyer while also focusing on the dealer's goal:
Hyundai revamped
First to address the consumer's need for information specific to this vehicle:
Add more photos of the actual vehicle being offered.
List features and options available on this specific vehicle in the second tab (possibly renamed).
If the advertised price is not available place an obviously click-able link to request the price.
To minimize buyer's confusion and information overload:
Remove one of the "Make an Offer" links.
Remove the "Request More Information" link (the "Ask a Question" link provides the same service).
Consider hiding the "Calculate Payments" box on pages without an advertised price.
For the car dealer's goal to get you to come in person and possibly up-sell the purchase:
Give the top right highly prominent spot on the menu the command to "Test Drive Today".
Directly under that, list location specifics and the hours open. Presenting these details removes the need to click through to a different page and the need to determine which departments' hours are relevant. That means a buyer could drop everything to run to the dealer immediately without the need to wait for another web page to load.
Add a third tab at the top to provide the details of this year's version of this vehicle. This allows consumers to easily sell themselves on the newest model because it has all those extra features they want.
As for me, I did find the car I wanted at a different dealer, one whose website quickly and painlessly answered my questions.
