NipTip team user testing session

An example of user-testing session conducted by NipTip team today:

Interesting findings:
0:50 – user is not sure if she should start from browsing FOOD or HOPUSE category. Probably, she would use Search instead. Or it is worth adding tips to several categories (but how to prevent mess in this case?).
1:25 – user is confused with text over picture, possible it is hard to read for several type of users.
1:40 – users do scroll! even there are no clues about hidden interaction elements below the page fold, user still checks if there is something below.
2:00 – user founds, that app usage scenario is rather practical, then recreational: she probably would not just browsing tips, but looking for solution of specific problem.
3:10 – user wants more useful information on main screen: icons, tips, subcategories, etc…

Possible questions to ask:
(a) Did you notice anything else you can do with a tip you discovered?
(b) Would you like to share a tip with friends or rate it? When would you do it?
(c) Do you have an idea what is “Favorite” button over here? Where would you looking for the tips marked as Fovorite next time?

In real life, try to ask about 5 users corresponding to your personas, before making design decisions. If you spend more then a 5 minutes with a user, consider giving something back: discount coupon, bar of chocolate, pen, fridge magnet or any other giftware you may have.

Advertisements

Day 4: Technology & Prototyping

Paper prototyping

Rapid prototyping online

Today’s theory is based on the best practices for mobile design:

Our goal for today is to build a prototype of your app. You start with main screen and max 2 supplementary screens to achieve your persona’s goals. Afterwards we cross-test them to get initial feedback about our efforts.

I advise you to use Apperi.IO. Here is ‘why’:

  • web-based – no installation required, works both in Macs and Windows;
  • supports full development cycle from prototyping untill deployment;
  • relies on HTML5 and Javascript, most of you are familiar with;
  • you can test and deploy your app on (almost) any device you might have;
  • free plan is full-featured, the only limitation is 1 user, 1 app and 3 screens.

There are enormous number of prototyping tools to start with. If you find anything worth looking at, please let me know in comments.

Photos

Tomorrow

We will talk about guerrilla/lo-fi prototype testing.

Homework
Select 1-3 user stories or use cases that you would like to test and finish needed views. You do not have to do layouts for actions you are not currently testing. We will run a simple usability test session or a walkthrough with other participants.

Example 

User stories 
1) “As a tourist, I want to find product “name”, so I can by it.”
2) “As a tourist, I want to see the location of the map of the nearest place where I can by product “name”.”
Task instructions
“You are a tourist visiting Tallinn.
1) Find a product “name”. /test/
2) Find the nearest shop, which sells this product on a map. /test/”

Registration to eVent

Attention all teams!

You are welcomed to introduce your project at TLÜ eVent show on May, 22 (Tue). Please fill in this form: http://htk.tlu.ee/event/vorm and be ready to present your prototype. It means you will be given 5-10 minutes to show your teaser, some screenshots or slides and to talk a little bit about recent activities and future plans.

See you at eVent 2012!

Spring Course Exam

Hi all!

Our course ends with an exam, consisting of essay (deadline 4.05), written quiz (was conducted in February) and team project presentations (taking place on May, 7th at 10AM).

Official exam days are: Tue 22.05 at 14:00 and Fri 25.05 at 8:15 (põhieksam). Last chance is Fri, 1.06 at 8:15 (järeleksam). All exams will be held in room T-321 upon advance registration according to university rules.

You SHOULD NOT attend an official exam if and only if all of the following is true:
1) you have successfully defended your team project on May, 7th (all teams passed, ÖKOTrans A, trreid B, Liikluinfo.ee Mobile C, Tiim4 C)
2) you have submitted you essay on time (Roger, Tanel, Antero, Lauri, Dea, Aleksandr, Raimond, Jaan – are OK)
3) and you passed the test with at least E (Lauri, Raimond, Roger, Dea, Tanel, Martti, Mihkel, Antero, Kaarel, Kristian, Signe, Jaan – are OK).

Good luck!

Prepare for finishing the course

Hi all!

To finish this course, you need:

1. Produce 1 minute video teaser for your project. Be creative, you may visualize any of your user scenarios. Feel free to select any tools: iPhone camera, Flip or anything that records video. This is also true for post-processing: iMovie, MS Movie Maker or Camtasia work well. When ready, publish it on YouTube or Vimeo without any restrictions and be ready to present it on May, 7 along with your project.

2. Finish your clickable prototype. UI should be ready and polished, while functionality might still be initial. Make a high-quality screenshot of your app to discuss on projector screen.

3. Compose an essay (1-2 A4 pages, up to 3500 characters) about Dan Saffers book or a chapter from it. Relate it to the work done, discuss how it helped you to enrich your understanding of IxD. Deadline for essays is May, 4 at 23:59 to my e-mail.

4. Update your blogs with video, latest screenshots and reflections.

5. Be ready to talk about your teamwork – start from an elevator pitch, then describe it in more detail (see slides about presenting project on previous page). Discussion with take about 20 minutes per team, comments and questions from other team members it are welcomed.

Good luck!

Two more examples of cool iPhone interfaces

Clear ToDo-manager is designed to help you manage your life without adding clutter. It’s a beautifully-designed, gesturally-driven app that we’ve created to improve on a pencil and notepad for flexibly keeping quick, simple todo lists. Clear was designed and built by Realmac Software, Milen.me and Impending, Inc.

A calculator that is as beautiful as it is simple. Rechner is that calculator. Experience the worlds first gesture based calculator.

Spring Course: Third Design Session

Hello, everybody! It is time to proceed with rapid prototyping. Lets move to from medium to high fidelity prototypes. Before we do it, please check there is a post in your project blog containing well-done and verified wireframe of your application with state-transition diagram or system map put on top of it. Your work should be accompanied by a couple of videos (1′ each is enough) or at least photos of verification process on real users.

To make your high-fidelity prototype I advice to utilize HTML and make it clickable from the very first stage. It would be easy to test on real device and continue with application development by just adding business logic to the interface. One relatively good tool for that is Codiqa – it allows you to build a nice clickable prototype and download it source-code as HTML for future development. Codiqa is built upon a jQuery Mobile, to it is easy to extend.

On the next class on 2nd of April you continue finishing your prototypes (from 8:15 until 9:45). After a brake we have a guest lecturerValeria Gashik (one of co-authors of this course) comes from Helsinki to tell about modern trends in graphical design. She’s lecture will be in English and you have a chance to get an expert evaluation about your visual communication design, as well as to ask a good advice how to make your graphical design more beautiful. Use this possibility wisely!

Spring Course: Second Design Session Ended

Now we finished the very first prototyping session and you should have ready wireframes of your application. Be ready to present them next time! Meanwhile read through article about Top 5 Mistakes of Interaction Design – it will help you in your home task.

Our next design session occurs on March, 26. Please note we skip one Monday, it is OK!

By that time, you should deliver and present the following:

  • Blog post that contains initial version of your paper prototype or wireframe (may be already done for some teams, then go further)
  • Blog post with feedback from users, who tested your prototype. Be more talkative and describe testing process and your thoughts about it.Make sure to add photos or video (2-3 minutes) that shows testing process.
  • Blog post with final version of wireframe, that should be done using Balzamiq, MockingBird or any other prototyping tool (you may find their list to the right). Define interactions among all wireframes (use arrows) and present them on one large-scaled picture. Make sure there is no orphaned wireframes or dead ends. Revisit course material if you need to refresh theory.

Good luck!

Spring Course: Second Design Session

Summary of second design session:

Now we have 4 teams – welcome Tiim4! Please hurry up and finish with personas, scenarios and user-stories ASAP – this is your hometask. For all other teams: you should review your user-stories and make sure that they are describe pretty well functionality and behaviour of your application that is requested by users. You will be using them as a check-list when designing prototype and developing your application.

During the design session we were prototyping sketches and wireframes for your apps. Please take your paper prototypes or wireframe print-outs with you to the next class on 12.03 – we need them for user evaluation. Your task will be find a couple of users similar to defined personas and get their feedback on proposed prototypes. To make this possible, you will be playing back scenarios you have composed earlier.

After that you will have time to finalize your low-fidelity prototypes and implement them as wireframes, using any suitable software (notice Tools section in this blog).

Zahhar

Spring Course: First Design Session Ended

Home task for all groups: validate created personas, scenarios and user-stories and improve them if needed; make a blog post describing apparatus used for validation (either questionnaire, or interviews, etc); finalize your blog posts with personas, scenarios and user-stories you will be using during prototyping we start next class; be ready to present work done in the very beginning the the next class (5 min per team, based on your blog records, you may use data projector or print-outs).

Special home task for new group: familiarize yourself with course schedule, previous student projects and assessment criteria; define your idea and be ready to present it to classmates next time (together with previous part of home task); create a blog and send me a link (make sure you have a first record containing your names); be ready to expand your team with one member.

Good luck!