Posts tagged with 'app patterns applied'

These last few weeks we have looked at the concepts behind our ritual apps, and explored key journeys for each. Now it is the turn of the weather app!

Sitting down with visual design (visual designs coming soon, watch this space!), we fleshed out the original weather concept to explore how it will meet the user journeys prioritised from our rituals metaphor.

Check today’s weather and forecast

I wonder what I should wear?

A weather app is a utility we use every day to decide how to get to work or what to wear. It’s essential that this app tells us how hot or cold it’s going to be or how much rain or wind we should expect!

The home view of the app shows essential information for the current weather, such as temperature and precipitation. Tap on the information panel to check what you need to wear for today’s weather.

The temperature display is defaulted to the user’s preference.

As the user scrolls up, the forecasted weather gradually changes to reflect the weather over the course of the day.

Once the scroll has reached a certain threshold, the forecast for the next day will snap into full view.

View yesterdays weather

Can I wear the same thing as yesterday?

User scrolls down to see yesterdays weather (this history feature is limited to just one day previous)

User taps on the information panel to reveal extra information.

Manage locations

Consistent to the Clock app, edit the location list from the toolbar

Add a city by tapping on “add city”, and either selecting from the list or searching.

Edit the list of stored cities by swiping to clear or drag from the left edge to rearrange (This is a new pattern we’re considering to rearrange items).

View different cities

To view other cities’ forecasts, users tap on the tab to display the list of cities they have selected, scrolls to select the city they want to view.

So, this wraps up the key journeys for the weather app as well as all the other ritual apps. We’ll post some teasers of the apps in action soon, and visual design!!! Exciting times.

Moving forward with the design of the core apps, we’ve been working on the interaction details of the clock for a while now, building on these concepts introduced a few weeks ago.

As with the calendar and calculator, we have outlined typical tasks a user wants to accomplish. We call them key journeys.

We have grouped the key journeys of the Clock app around its four tabs; Clock, Alarm, Timer and Stopwatch.

Clock : what time is it in New York?

Tap on “London” or swipe/scroll up to reveal a list of cities underneath

Tap on “New York” on the list

View scrolls back up, and shows the time in New York

Clock : adding a new city

Swipe up from the bottom edge to reveal toolbar

Tap on “Edit”

Tap on “Add city”

Select a city from the alphabetical list, or tap on the search field

Type in the name of the city, and select one from the results

New city is added to the list, you can rearrange the list by dragging list items around

When ready, tap on “Done” to return to the main view

Clock Easter egg: sunrise and sunset times

Here’s a little trick we’d like to add to the clock face: By tapping on it, you get the sunrise and sunset times for that location. To revert back to normal clock face, just tap on it again. Easy!

Alarm : set an alarm

To change the alarm time tap on the clock face

Clock face pops out larger, dial become interactive and a “Done” button appears in the middle

Turn the hour and minute dials to set the time. Counter above shows the set time. The label underneath dynamically shows the time to this alarm.

To make the alarm repeat, tap on “Repeat“ and a multiple selection list appears. To close, tap on “Repeat” again.

Similarly, you can tap on “Tone” to set the alarm tone

When you’re happy with your alarm, tap on “Done” in the middle of the clockface

Clockface pops back into its default size and alarm is toggled on

Alarm : toggle alarms on and off

Tap on ”Time to next alarm” or swipe up to see the list of alarms

As the panel containing the list slides in, the view with the clockface compresses to show just the digital clock and the “Time to next” button

In the list you can toggle alarms on and off

Return to the main view by swiping down, or tapping on the top part of the screen

Main view displays the next alarm, if no other alarm is selected

Alarm : create a new alarm

Swipe up from the bottom edge to reveal toolbar

Tap on “add alarm”

Clockface pops out to an edit mode.

Turn the dials to set the alarm time

Use options below to set Repeat, Tone and Vibrate

Once happy, tap on “Done” in the middle of the clock face.

Timer : set timer manually

Turn the dial clockwise to the time you want (alternatively, tap on plus and minus to add or subtract a minute)

Tap “Start” and wait

When the timer hits zero the alarm sounds off

Acknowledge by tapping on “Done”

Timer : set timer from a preset

Tap on “Presets” or swipe/scroll up to reveal a list of presets

Tap on a preset, for example “Soft boiled egg”

Timer changes to the time set by the preset

Press “Start” to begin countdown

Stopwatch : simple stopwatch start, stop and reset

Tap on “Start” to make stopwatch go off

Tap on “Stop” to stop it. Tap on “Start” again, to continue or “Reset” to clear the stopwatch

Stopwatch : recording laps

Tap on “Lap” to create a lap

Lap counter in the middle rotates to the next number up

Lap also creates a blip on the rim of the clock face. It expands and fades out in a few seconds

To see the list of laps, tap on the lap counter or swipe/scroll up

Stopwatch Easter egg: time zoom

Finally, let’s have a look at a little playful detail that’s baked into the stopwatch. The stopwatch clock face has two modes: the first one shows seconds on the outer ring and hours on the inner ring. It’s all good and normal, but if you want to see time in finer detail and the dials rotate faster, just tap on the clock face – the view zooms in to display 1/100 seconds on the outside and seconds on the inside. This does not affect the timekeeping in anyway. To switch back, just tap on the clock face again.

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:

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

Whereas the key screens 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.

For today, here is a closer look at the Calendar concepts key journeys

Change to another month

To move to the next or the previous month, simply swipe left or right on the month view.

Month names in the header roll in sync with the swipe

Change to another day

To move to the next or the previous day, swipe left or right on the agenda view

Selected day is popped out in month view, but today’s date remains highlighted in Ubuntu accent colour

You can also tap on a day number above, to move to that day

Compress the month view into a week view

Scrolling up on diary view, collapses the month view into one row, showing one week only and giving more space to display your events

Change from timeline to diary view

You can toggle between ‘gapless’ diary view and hourly view by bringing up the toolbar from the bottom edge and tapping on the Timeline / Diary view option

Create an event

The option to create a new event can be found in the toolbar, so just swipe up from the edge and tap on New Event

To cancel, just tap on outside the card on the top, or push it back down

Create Event card pops up with the keyboard, so you can immediately give title to your new event

You can also specify date, time, location etc. and add people to the event (details to be iterated)

When done, tap Save, and the card will slot into its place in your diary

View event details

To view an event in detail simply tap on it

Event details open up in full screen, it should be easy to glance when it is, what it is about, where it’s taking place and whose coming

If you want to, for example contact any of the people invited, just tap on the name, and their contact details open in a split view*

To go back to your diary, swipe up the toolbar and tap on ‘Back’

Remember we are still in the sketching and wireframing phase, visual design will come later and undoubtedly steer the design further!

What’s next?

We need something real to touch and poke, that we can test and improve – so don’t hold back as this is a great time to start prototyping!