Evaluation Method For Project

As evaluation method for the project we have this week chosed Jacob Nielsen's 10 heuristics. We choose this method because we thought it was the most appropriate considering our target group, small children. We will use our knowledge and expertise to evaluate the application considering usability and what we know about usability for small children, if possible we will try to do a cognitive walkthrough as well.

Having small children as a target group complicates the evaluation/inspection process since most of them, can't read instructions or give written answers. This excludes many of the other evaluation/inspection methods we initially considered. Another complication is that non of us, within the group, knows or have access to small children. This excludes evaluation/inspection methods like interviews, focus groups and/or talk aloud protocol that otherwise could have been good and suitable methods for finding and analyzing usability problems. A comparision btween usability evaluation methods can be found here.

Usability Analysis/Evaluation/Testing... or Whatever

According to the project requirements, we are asked to perform a usability analysis to some subject we chose. So I set up some research on proper methods of usability analysis.

Here are the results:

- Wikipedia page on evaluation methods (link)

- Wikipedia page on comparison of usability evaluation methods (link)

- Four chapters from the Interaction Design book (online version)

    - Introducing Evaluation (link)

    - An Evaluation Framework (link)

    - Usability Testing and Field Studies (link)

    - Analytical Evaluation (link)

New Blog Header!

Photoshoped by Flora.

Size: 880 x 285

Font: Calligraffitti

Here is another one with some descriptive text.

Which one do you think is nicer?

Some Random Post

This picture is taken at the lunch area for students where we had our first project group meeting. Well, what draws my attention was not my group mates, but (did you notice? make a guess first, haha), the beautiful color combination here - warm, red painted wall with blue-and-white checked floor, and the thick, white window frame which balanced the picture for making the bright colors not look too strong.

Although it is not much directly related to the project, I made this post still. Is to remind myself (and you, if I could) to be aware of and appreciate beautiful stuff always. Probably some day it will appear in one of my designs, or our group's designs, who knows?

[Week 6] MicroCal, Future Work

Important factors to consider for further development are how to display overlapping events and choosing the right colors for the color coding of events, to avoid problems for users with vision impairment/color blindness. Also our idea with using icons/graphics as a complement to the color coding/color segments will continue to be discussed and explored. That may aid the visually impaired users, making it easier to recognize tasks without analyzing the color.

[Week 6] Innovative MicroCal! (Colored Bar View)

This week's assignment is to design the look of a micro calendar (see requirements here).

Have you ever noticed the volume info bar in your iTunes?

It shows the usage of disk storage by category. Each category is assigned a color with the legends below. It is a very good example of information representation using graphics.

As for our MicroCal, the idea is almost the same: using colored bar view to represent a calendar! An important reason for why we abandoned the normal cal view and chosed to work with color coding is that, people usually don't need so many printed numbers (dates) in grids to tell what day is it. They rather just recognize the positions. Also this design uses less space of the interface. From the beginning the calendar is represented by an icon on the desktop, if the icon is clicked, the calendar is expanded as a vertical, color coded bar.

So the basic idea is to fill a blank vertical bar with different color segments representing tasks/events or free time. More information isn't displayed unless a user mouse over the bar or clicks on it. Since it is of a bar look, it won't take much space on the desktop, which means it is a literary "micro" calendar adapted for small spaces.

Eventually, our prototype looks like this:

Day View (Mouse over to show time)

Day View (Click to see task/event details)

Month View (Mouse over to show date)

Month View (Click to see task/event detail)

Month View (Click to see task/event detail, another example)

Week View (Mouse over to show date)

Week View (Click to see task/event details)

Can run backstage. (Click to shrink/expand)

As shown above, the calendar has three type of views: Daily, Weekly and Monthly. Monthly Bar is relatively longer than Daily and Weekly and color segments are more clustered. This view is optional and can be changed by a right-click on the icon in the status bar. It is also by right-clicking the icon, a user can add/remove or change an event of the calendar.

When a user mouse over the calendar in a Weekly/Monthly view, the date of the day will be displayed and for a Daily view it is the time that will be displayed. When a user click on a color segment, a pop-out balloon show the details of the selected task/event.

The advantage of this application is its extremely simple look and possibilities to adapt to what ever size of a display. The calendar is also easy to reach within the interface and optional whether to be displayed/expanded or not.

Go-Through and Review of A Real iPad App for Kids

* Side Notes: All pictures in this post were shrunk to fit the width of the blog. Click to view full-size image.

The iPad app "The Heart and the Bottle" (more info)

As mentioned in an earlier post, we downloaded a storybook app on iPad for analysis purpose. This afternoon we had a meeting and did a go-through of the app. Here is some comments we had, combined with relative screenshots.

* Side Notes: All pictures in this post were shrunk to fit the width of the blog. Click to view full-size image.

So the story begins..

"The Heart and The Bottle" is a interactive storybook app for iPad. It only has three buttons: Menu, Hint, and Read Aloud (the button with a speaker icon). There is also a folded corner for page flipping. As shown in the above screenshot, the grey dotted line is the hint shown when we click the Hint–button. It hints the reader to tap the book in grandpa's hand and drag the screen horizontally.

Everytime a new page is shown the readers may explore the picture to find out were the interactive parts are (in other words, some parts are NOT interactive). This is good for curious young readers to explore the wonderland inside the book, but also confusing because sometimes the interaction is well hidden, either too deep or at wired places. The hint button is very useful if the kids get tired of figuring out were the interactive parts are, they can tap the button and follow the instruction.

This is a example of the books creative interactive design: tap the sea to make ripples.

Then, we came to a page where the little girl and her grandpa are watching stars. Readers may connect the stars to create some simple shapes, and the little girl will tell what does it look like (for example, the shape in the screenshot above looks like a ribbon). It has a good learning purpose and teach the children how to interact and use tablets. However, for the naive user (which most kids are) it's a bit hard to figure out that it is actually requiring one-stroke drawing and that the user is supposed to imitate the shape from the small black figure. The small blue balloon (above the girl) will keep showing a big cross, which is a bit annoying and perhaps frustrating for children to understand.

Our alternative suggestion which we think is more adapted to children is to show a demo, perhaps by the girl, how to draw the shape between the stars (during when no tapping is accepted) at the beginning of this page. Not for every page, because it will therefore decrease the fun part of exploring the book but for all interaction that is more difficult to understand what to do and how to interact. That way it will be easier for children to mimic the required movement, interact themselves and without the help from elderly persons.

This is the second biggest usability problem with the book, it requires children to either have the ability to read the instructions (or Hint–button) themselves or to have someone helping them. It is difficult for small children without reading capabilities to understand/read the book themselves. It is our intention to create an interactive tool suitable for all children, with or without reading capabilities.

This is also a good one: drawing on the sea shore. It is very easy to understand for all children.

Another drawing session. It's intuitive to understand how to choose a color and how to draw, even erasing is easily understod. The problem with this slide is how to continue the story when you are done drawing. If the user want to continue as before, slide the lower right corner of the page, a HUD is displayed with options (textual information). This is probably again, frustrating for kids without reading abilities. To continue to the next slide/page of the story, the user must choose the third alternative "I'm done". This is not optional for children–interaction.

This is an example when the multi–touch function is used poorly. From the beginning the page has a white background but when swiped, another background is evolved. This is very fun, allowing the user to use the multi–touch function on a large space and frequently (very suitable for inpatient kids). The problem occurs when the user tries to swipe the lower right corner of the page, close to the folded corner. If a user swipes this corner the next page is displayed, perhaps before the entire page has been swiped to a different background. Instead the corner should be locked for one purpose only and that is to change page. That would offer better continuity, making it easier to understand and to use.

This was the most confusing page. Readers need to tap on something to let it disappear. This normally doesn't happen, because as a feedback of an action, adding stuff/changing shape is more obvious than letting things disappear. It took us long to figure out how does this page work, before when we kept thinking tapping on this page does nothing at all！

This is an example of an interactive task. The user is supposed to help, evolve the storyline by making the small girl grow. The user is supposed to drag the girl upwards to let her grow, and let the story continue with a big girl.

Here, the user is supposed to help the girl get the heart out of the bottle by shaking the iPad, which in turns makes the heart skip out of the bottle.

The girl is trying all kinds to break the glass bottle. Here readers can tap on different tools on the table to help the girl break the glass bottle.

The end of story, readers tap and drag to return the little girl (now grown up) her heart. This is another example of the Hint–function.

Usability Problems in Current Children's Apps

There are many apps in the market currently that target children. However, not all of them are as usable as they seem to be, to the children. We have identified several problems that affects usability of the app when the users are children. The main problems are:

• Use of textual information rather than graphics / metaphors for guidance and instruction
• Requiring patience from the user
• Lack of affordances that induces the user to interact with the application in a certain expected way

source: http://www.useit.com/alertbox/children.html

Shown above is a table of comparison for usability issues for children, compared to adults. While this study was done for websites, we think that it can be applied to apps as well.

Important factors that we have taken notice of are:

• Patience - children tend to have short attention span and may not want to wait a long time for something to happen.
• Sounds / Animations - it entertains the children should there be a waiting time. It also draws their attention.
• Real-life Metaphors - it acts as a guidance for interactions with the machine
• Multi-touch - it is important to allow this on an application for children, as they usually have poor control over the system and might use both hands (or several fingers) at the same time.

[Week 6] Some Pre-design Thoughts

This week's assignment requires us to design a Micro-Calendar that displays our daily schedules in a small space.

Since it is a small space we are talking about, we need take into account that not too many features can be packed inside.

Traditional calendar apps in the iPhone as well as Google Calendar follows a fixed structure that is widely accepted - displaying a simple calendar that fills up with events that the user inputs.

They also have one thing in common - colour coding. As mentioned in the lectures, colour may not necessarily be the best way to categorise information, as it excludes people with varying degrees of colour-blindedness.

My idea of the MicroCal will be something that follows the traditional calendar display, but with icons to represent different categories of events for the day. The design should be kept as simple as possible to avoid looking cluttered.

Examples of icons we can use:

Work: 
Kids: 
Friends: 

More discussion will be done and stay tuned for our final design of the MicroCal!

The Secrets of a Pop-up Book

We have all played with pop-up books when we were young. Whether it was the colourful graphics, the sense of surprise or the curiosity over how the pop-up mechanisms work, most of us would have been fascinated by it at some point in time.

With the dawn of touch-screen phones and tablets, people have gotten creative with their usage in many ways. In line with our project topic on children's apps, we have found yet another example of creative usage of tablets for children's educational purposes.

This app, other than letting children play with the movable mechanisms as in a real physical pop-up book, also allows children to learn about how the mechanisms work with an "x-ray goggles" mode that would display the gears and connections behind the moving parts. This would not have been possible with a real physical book, at least not without tearing the book apart. =)

Another advantage of having such apps is the fact that we do not need to worry about the book being torn by over-enthusiastic kids who love to take things apart.

Over the course of the next few weeks, we will analyse more of such existing apps for kids and look for existing problems that we can hopefully solve in our project.

Some Initial Thoughts About The Project

In the afternoon we did some brainstorm about the project, and we decided to design something for KIDS. Yay!

How the story began is, we watched a YouTube video (link here) while hunting for topics. It is about a interactive storybook app for iPad.

...And we liked it a lot. The app is a brilliant one in terms of its interactive design and the ease to use. We actually downloaded the app (Thanks to Cissi the iPad owner, it costs 28kr) and tried it out. We were impressed by the creative interaction designs!

Meanwhile, I shared this article I read before about UI design for toddlers (The original article can be found here). It has some good suggestions about UI design for kids.

The group will meet again on Thursday 1pm.

Rearrangement Of Labels & Post Titles

For better documentation purpose, I made some rearrangement to the blog labels & post titles. Some changes are:

1. Add "[Week #]" in front of every blog post for weekly assignments. # stands for week number. For example, "[Week 5] Creativity".
2. Two fixed labels for assignments/project are "Weekly Assignments" and "Project". They are located at the top of the right column.
3. Each post can have multiple labels. For assignment/project posts, other than the two fixed labels, more can be added based on the content of the post. All labels by content can be found at the right column, the second from top.

That's all for now.

[Week 5] Trip to umeå

These pictures are from a short weekend in Umeå, a small city in the north of Sweden. Umeå has an amazing winter landscape and it was easy to feel creative and imaginative. The winter landscape express new colors, shapes and patterns which inspired me.

[Week 5] Creativity

These pictures are from my latest trip to Barcelona. My sketches reminds me of the memories, the coffee i had and the people i saw. The three later pictures are from a notebook i bought which consists of sketches/drawings by others. The last one gives a creative, figurative example of how we pollute our cities :)

Project

During the course we will document our progress with developing and/or improving a dysfunctional product. This work will include a usability analysis and a design proposal that solves the detected problems. The work will hopefully be well documented here in this blog and indicate our progress in learning interaction design. It will also test the ideas and methods we learn to develop better and more usable products.

[Week 5] Creativity Intro

This weeks assignment includes documenting creativity, observations and signs of creativity. This will appear as posts of i.e. ideas for creativity and how to become more creative. Inspiring pictures and tools for creativity, inspiring words or people we meet, some of this might show up in a near future. =) Stay put!