Canonical Voices

Posts tagged with 'user experience'

Martin Keary

This is a presentation of our ‘Paper’ Motion theme for Ubuntu Mobile.

The theme is informed by the ‘paper’ graphic style of the mobile OS and we have sought to accentuate it wherever possible. Rather than using more overt effects like page curling and folding, we have hinted at the theme by using multiple layers, ‘stacking’ and suggestive effects. Multiple layers of sliding paper can be observed in the animation of the switch button, stacking can be seen occurring on the icons in the launcher and an example of a suggestive page-turning effect can be seen during the ‘App Stacking’ example.

Read more
Tingting Zhao

Understanding user behaviour through user research is an integral part of our design process. In the last ubuntu.com website testing, some insights surfaced about user behaviour, which could help to shape a great user experience for our website. We share the three mains ones here. They have been much discussed in the UX, and the findings from the testing reinforced their importance.

Who were the participants?

12 participants took part in this research. They belonged to two different groups:

  • Ubuntu novices: those who have limited computer knowledge and had not heard of or used Ubuntu before. 8 participants were from this group. They were professionally recruited and of mixed genders.
  • Ubuntu users: those who use Ubuntu OS on a daily basis. They were from our Ubuntu users database pool and were recruited via emails.

What were the three main types of user behaviour found?

The Power of Images

“I go straight to the pictures before I go to the words. You look at pictures and they give you a flavour of what it is all about.”(P3)

” I use images to decide on a product. I tend to work very visually. Sometimes it is not easy to understand the jargon, and it is much easier to see what it is like. ” (P6)

“I’m just looking at the picture to see how much learning is required.” (P10)

In the testing process, we observed that participants appeared to rely on images heavily to help them form an opinion about Ubuntu. They used images in multiple ways throughout their interaction process, including:

  • To understand what the interface is about or make sense of an unfamiliar concept/feature
  • To decide whether or not it looks easy to use
  • To compare it with what they are currently using, and to see how much learning it may require

Images are therefore a powerful communication medium for us to build a positive brand with our users.

Take away:

It is important that images are relevant to their context and offer the best presentation of the product. We should use images to reflect the user friendliness and uniqueness of Ubuntu.

The Journey of Persuasion

“When I first came to your site, you need to tell me why I want to use this. This is paramount.” (P2)

“ It (the site) needs to highlight what I don’t know. Why I should use it, and with examples.” (P5)

When participants first landed on the homepage, they expressed their need to be informed about what Ubuntu does, who it is for, and why they should use it. They wanted to be convinced from the very start.

During the exploration process, when they were looking at Ubuntu pages, participants were attentive to the apparent benefits Ubuntu could offer to satisfy their personal needs. They relied on concrete examples and statistical figures to establish and enhance their understanding and trust. They also enjoyed browsing through different quotations from our users.

Take away:
The persuasion process should start from the moment users land on our homepage, until leaving the site. The key proposition messages should be specific, apparent and repeated throughout the user journey.

Make Use of Opportune Moments

“It says free upgrade for life, that’s good. Built in security, that’s good. Thousands of apps, that’s good too. I want to click on these to find out more.” (P3)

Our website has many good design features that grabbed participants’ attention straight away, for instance, the image tiles for ‘Reasons to love Ubuntu’ and the use of bullet points to outline essential information about Ubuntu’s main features. When participants encounter such design features or content that they found interesting, they often wanted to click an icon or topic to explore it further. They were disappointed or even frustrated if these were not clickable.

Take away:
We should make use of these opportune moments to keep users engaged and informed by providing efficient and desirable navigational paths to lead them to more detailed and relevant information.

What’s next ?

The web team has been carrying out changes in response to the user testing results. The aforementioned user behaviour findings will feed into the next web design cycle to help with the design decisions. This will help users to get even more out of their visits to Ubuntu.com.

Read more
Christina Li

A few weeks ago we introduced key screens for our core utility app designs, and we’ve been sketching key journeys ever since to unpack these concepts further.

We use key screens to communicate the overall, high level concept of an app, outlining key journeys is a design technique that gives us a feel for how users can accomplish a typical task when using the app.

Key screens

The main purpose of the calculator app is to enable calculations for simple day to day tasks; “rituals”; such as splitting the bill at a restaurant or working out your budget for groceries.

There were a lot of questions about the visual design of our concepts so far, so this week we thought we’d try sharing our key journeys in a different style of wireframe. Here is a closer look at the calculator app.

Enter a new calculation

There has been some interesting discussion on the mailing list about how to handle the order of operations (or ‘operation precedence’). The driver for this simple view is to support basic calculations. The order of operations will be handled as it normally is – with multiplication and division first, followed by addition and subtraction, without brackets ( ).

E.g., 1 + 2 x 4, will be read as 2 multiplied by 4, add 1, equals 9.

 

  • A ‘0’ is displayed on start to indicate no calculation
  • User enters ‘1’, a different colour (e.g., orange) is used to indicate the last input
  • User enters ‘+’ and ‘2’, operators are displayed after a number input
  • User enters ‘equals’ on the calculator numpad, and a dash separator line appears with the calculated answer and a line to indicate this calculation could be pulled up to create a new one.

Start a new calculation

We have also been brainstorming ways to create a new calculation. Our concept was originally inspired by the idea of a receipt tape, which we wanted to follow closely, and an idea that came through the mailing list was that of ‘ripping-off’ a calculation by pulling up; creating a new one (awesome idea, Bruno Girin, thanks!).

  • User pulls up to create a new calculation, geo-location, date and time of the calculation will be added to the top of the calculation automatically (e.g., ‘@Tesco, 06/03/13, 10am)
  • The previous calculation has moved to the top, remaining only as a visual hint.

View a calculation

  • The calculations are seen as a continuous list, user can scroll up and down the list freely
  • As user starts to scroll down to view previous calculations, the calculator numpad transitions out. The numpad transitions back into view when user scrolls up and reaches a threshold of the last calculation
  • An interesting note is that the QWERTY keyboard could appear at any time by tapping to edit labels. (This will be explained in the ‘Adding a label’ journey; keep reading).

Delete a calculation

  • To clear a calculation user swipes side way and a label (e.g, ‘clear’) transitions in
  • If the cleared calculation is at the bottom of the list, a ‘0’ is displayed. If the cleared calculation is followed by another calculation, then that calculation will be displayed.

Add a label

We have included the ability to add titles and labels to the calculations to help us when we’re splitting bills or doing our grocery calculations!

 

  • As mentioned above, geo-location, date and time of a calculation will be added automatically when a new calculation is created
  • User taps to the left of a calculation to start creating and editing labels!

Numpad layout

Also, there’s been a lot of discussion about the layout of the numpad! Based on our key journeys, here’s what we’re thinking to cover daily use scenarios:

As usual, sign up to the Ubuntu Phone mailing list and the IRC channel to discuss more.

Read more
Calum Pringle

We’ve been making great progress from both design and development on our four core utilities for Ubuntu on phones so, while we are iterating these concepts, we thought this was a good time to share more of the inspiration behind the apps designs. This helps us keep our goals in sight, not only on the design side but throughout development.

A day in the life

It’s morning. An alarm sounds. I turn over. I look at the clock. It’s going to be a busy day. I get out of bed.

I shower. I finish showering. I wonder what I should wear. I wonder what I will I do at the weekend. I check the weather.

It’s lunch time. We go to a restaurant. We pay. We work out the bill.

It’s evening. I check my todo list. I check my calendar. I’ve got a date. I send a message.

It’s night. I check the weather. I check my calendar. I check the time.

(Photo credits: heredfordcat, roberstinnett, Jacob Bijani and  Phoenix Dark-Knight)

Sound familiar?

Without something to support these daily routines we think we’d be lost entirely, and we don’t think we’re alone in that!

The opportunity

The opportunity with the Clock, Weather, Calculator and Calendar apps on the Ubuntu phone is to create a consistent experience which impacts the daily lives of our users. A suite of apps that are used as part of a daily ritual; sophisticated, consistent and content focussed.

Let’s call them Ubuntu’s rituals

An alarm sounds. I turn over. I look at the clock.

The Clock app

  • The same clock face for every feature; adjust with easy gestures.
  • Something to delight; it’s the first thing you see in the morning and the last thing you see at night.

I wonder what I should wear.

The Weather app

  • Check the weather today and yesterday, tomorrow and the weekend.
  • Make it contextual; do I need my umbrella? (terribly British example!)

We work out the bill.

The Calculator app

  • Tear off the strip of calculations and jot down your notes.
  • It’s all about the task; this app helps you work out your budgets and bills, not the definition of Pi!

I check my todo list. I check my calendar.

The Calendar app

  • Organise your life your way by month, week or daily diary.
  • Again, it’s about the task and the context; use the calendar app as a todo list, a diary, a planner, a journal, a life log; and the calendar will behave how you need it to.

What does this mean?

When we design and build an app, we always have a key story in mind. Whenever we think “oh it’d be really cool if…” we remind ourselves of this story; therefore it helps us to produce an app that is simple, streamlined and delightful to use.

“Ubuntu rituals” inspired the concept of these four apps and we will use this to guide us through further iterations of both design and development.

So where can I see this?

Follow our development progress on Google+ as well as the usual places; the Ubuntu Phone mailing list and IRC channel.

Read more
Amritpal Singh Bhachu

Back to Lecturing for the day

In my last post, I spoke about my transition from academia to industry. One thing that I felt I would miss were the opportunities to speak to students, and watch their progression throughout the year. So when I was asked to go back to the University to give a talk, I jumped at the chance.

So I prepared what I was going to talk about and set off to the School of Computing at the University of Dundee to meet these talented students. My first job was to help assess their group pressure projects which they had been tasked with the week before. The theme was educational games. Over the next 2 hours, I sat and was amazed by what the groups had produced in such a short period of time.

The Winning Group with their Ubuntu prizes

Several things frustrated me however.

Each group had 3 minutes to present their game and explain what they did. But they all focussed on showing gameplay and illustrated some of the code that they used. A number of groups stood up and highlighted that they felt their game wasn’t very good because they didn’t have strong coders in their team. When I asked them questions about the processes that they had been through before coding, they all showed evidence of brainstorming, wireframing and design. My biggest issue however was that most of the groups started coding before they considered who the user would be, and therefore, they considered a user to meet the code, rather than producing the code for a specific user.

So this lead me to change what I wanted to talk to them about, and I did an interactive session with the 80 odd students to develop a user profile for the remit they had been given. We looked at who the user group was, what were the characteristics of this user, where would they want to play the game, why they would want to play the game and how they would play the game. We brainstormed on a whiteboard and agreed on which attributes to keep, and which to remove. This was all done in half and hour. The students really took on board the importance of considering the user, and how quickly it could be done for the projects that they would be presented with going forward in their education.

It was the most enjoyable lecture that I had ever taken, and I look forward to doing it again soon.

On another note, later that evening I made my triumphant return to the land of stand up comedy. I was invited back to do Bright Club Dundee having performed last year. It was great fun to do, even though I don’t think I’ll be looking at a change in career anytime soon! Below is a photo of the performers….you can quite clearly see the fear in our eyes!

Bright Club Dundee Performers

If you want to see my set (which contains strong language and little humour) then follow this link.

 

Read more