Canonical Voices

Posts tagged with 'user experience'

Katie Taylor

Edges are special to us. We use them for finding apps, tools and system services, so using the edges will be second nature to Ubuntu phone users. By using the launcher, how to launch your favourite app will become ingrained in your muscle memory of the left edge.

The design vision behind Ubuntu for phones includes the use of fast and natural interactions, so taking that to the welcome screen means that if your phone is locked, you can still access the launcher, system services and the right edge. If you have a pin set up, you only need to enter your pin when accessing private data, in the Gallery app or the Dash for example.

 

 

If you’ve flashed your phone recently, you will be able to activate the lock screen for the phone using a temporary hack (love it!). You’ll notice that the blur has not yet been implemented, but will be added later. Thanks to Michael Zanetti for originally posting instructions to the Ubuntu Phone mailing list. Here they are:

To enable the pin lock, log into the phone and create a file /home/phablet/.unity8-greeter-demo, with the content: password=pin

If you want to see the password unlock screen instead, put this into the file:  password=keyboard
For now, the pin is hardcoded to “1234″ and the password is “password”. Note that this functionality can (and will) disappear at any time as we bring all the bits and pieces together. This is a temporary, simple way to enable the visual part of the lock screen for us all to have a play with.

Let us know what you think on the Ubuntu Phone mailing list and the IRC channel.

Read more
Calum Pringle

It’s been a while since our last update to the app design guides so I thought it was about time I shared the latest additions to this growing resource.

Screen sizes

A brief intro to the framework we use for designing for a scalable OS - the grid unit. With a link directly to a more detailed explanation on developer.ubuntu.com.

Read about designing for multiple screen sizes.

FAQs

We’ve started to collect frequently asked questions. This section could be improved if it was a little more ‘live’ so we’ll have a think about that.

Read our most frequently asked questions.

Combo button

When you are receiving a phone call, it is possible to decline the call (of course), or alternatively you can decline and reply with a message. To accommodate this and similar use cases we have designed the combo button. Use the combo button to display secondary variations of the primary action.

See our new combo button.

Option selector

While designing System Settings we have come across many situations where there is a need to select from a list of mutually exclusive options. Use the option selector when you need to select an option from a list.

See our new option selector building block.

Slider

Our slider has gone through a little makeover too.

Take a look here.

Remember, this site is a work in progress, so we will continue to iterate on the content and design. As usual you can find us on the Ubuntu Phone mailing list and the IRC channel.

Read more
Lina Pio

One of the key challenges with designing calendar applications is the number of ways you can display your time, whether it’s by year, month, week or day. After a lot of good old fashioned hard work, we refactored navigation by making the tab header the key to switching between views. Although the direction I’ll take you through in this article is strong and clean, it’s still a work in progress, and as such, can still change. The images are small in this article, to get a closer look at all of them collected together, download the PDF here.

The latest designs in this article show you how we’ve aimed to solve:

  • Navigation between different calendar views
  • Gestures to help quick navigation
  • Editing events
  • Creating events
  • How this will potentially look and feel

 

Different views

There are 5 different view templates inside the calendar app we are focusing on. They are:

  • Year
  • Month
  • Week
  • Day
  • Event

 


Navigating between different views using title header bar

You can move through the different views by tapping on the title header bar to toggle the view mode options. Just like our patterns, this title is scrollable – so that you can scroll through the view modes which don’t fit the width of the screen. Also like our pattern, swiping to the left or right moves along to the next or previous unit (year/month/week/day/event) in its category. For reference, take a look at Calum’s excellent post on this.

To get a better idea, click here to see a video of the prototype which formed the base of this navigation model and allowed us to test it out, comparing and contrasting it against other design directions. It was enough to give us a feel for the potential final build.

 

Navigating between views using spread and pinch gestures

To aid fast navigation for pro users and to also add an element of fun, we’ve decided to enable zooming in and out between views using finger spreading and pinch gestures similar to zooming in and out in a map app.

 Spreading fingers gesture: This zooms in to the next view; the next view offering more detail, close up.

     E.g. A user spreads when on the year view. This opens up the month view. Spreading on the month view opens up the week view, and so on.

Pinching fingers gesture: This zooms out, to a less detailed view – the previous view in the view hierarchy.

     E.g. A user pinches on month view, the system responds by taking the user to the year view.

 

An event

An event has several detail fields. In order of appearance they are:

  • Event name
  • Time
  • Description
  • Location
  • Guests
  • This happens (how many times does this event happen in the series? Or is it a one time event?)
  • Remind me
  • Timezone

 

Editing an event

A bottom edge swipe on an event page brings up the toolbar with the edit button.

[NOTE: toolbar menu options within the calendar and across the whole system have not been finalised, this image of the toolbar is a placeholder to give an idea of how to edit]

The edit mode shows the boxes around the fields allowing the user to type and change the event details. The toolbar in edit mode is always present. It shows cancel and save options.

 

Creating an event

A bottom edge swipe on year, month, week and day views brings up the toolbar with the option ‘New’ to create a new event. Pressing this brings up a similar template to the ‘Edit’ mode, the only difference being the blank forms.

 

Visuals

The visuals in the image below are an exploration of how this can potentially look and feel. This is still very much still in progress, but gives a strong hint of what’s to come.

 

 

I hope you like our thoughts and directions on this, and that this article gives a stronger idea of what the final app will look and behave like.

Watch this space for my upcoming articles focusing on: an in depth look at events – (including guest contacts, location views, time and date pickers etc) calendar synching with external accounts, calendar settings, and calendar mode inside the indicators.

Read more
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