Canonical Voices

Posts tagged with 'convergence'

Steph Wilson

Back in June we hosted a competition that asked developers to use the AdaptivePageLayout component from the UI toolkit to create an app that converges across devices. We had some very impressive entires that used the component in different ways; choosing a winner was hard. However, after testing all the apps the design team chose a winner: the Timer App.

How does the AdaptivepageLayout work?

The AdaptivePageLayout component eliminates guesswork for developers when adapting from one form factor to another. It works by tracking an infinite number of virtual columns that may be displayed on a screen at once. For example, an app will automatically switch between a 1-panel and 2-panel layout when the user changes the size of the window or surface, by dragging the app from the main stage to the side stage.

You can read more about convergence and how the adaptive page layout works in the App design guides.

Timer app

The Timer app impressed the design team the most with its slick transitions, well thought-out design and ease of use. It used the AdaptivepageLayout well when it translated to different screens.

Design feedback

  • Design: well-considered touches with design, animation and various cool themes.
  • Usability: a favourite is the ability to drag seconds / minutes / hours directly on the clock.
  • Convergence: adjusts beautifully to different screen sizes.

Screen Shot 2016-08-09 at 09.10.32

Screen Shot 2016-08-09 at 09.14.14

Timer app

Other entries

Thank you to all who participated in making their apps look even more slick. Here are the other entries:

2nd: AIDA64 App

  • Design: clean, readable with clear content
  • Usability: pretty flawless
  • Convergence: Adaptive Page Layout suits this type of application well and is used well

3rd: Movie Time

  • Design: functional with good management of all the content
  • Usability: live results for search works smoothly as well as trailer links
  • Convergence: the gridview of poster art lends itself well to various screen sizes

4th: Ubuntu Hangups

  • Design: clean and follows guidelines well
  • Usability: easy to message / chat, with user-friendly functionality
  • Convergence: easy to use particularly on Phone and Tablet

5th: uBeginner

  • Design: basic and clean
  • Usability: information is well-presented
  • Convergence: uses the Adaptive Page Layout well

Try it yourself!

To get involved in building apps, click here.

Read more
Jouni Helminen

Visual design of convergent apps

It is an exciting time as we’re starting to see more and more of the new, convergence-enabled UI toolkit and features for Unity 8 come to life. Some classic X11 apps (Gimp, Libre Office and a few others) are already running on Unity 8 using new hardware from our partners, including the award winning M10 tablet from BQ – very cool.

At the same time, we want to help people write or port more applications to our platform, using our modern UI toolkit designed to smoothly flow the user experience through touch and pointer inputs, a range of screen and keyboard types and all of the permutations in between! It has been an interesting design challenge to imagine, design, and begin to build a world where all interfaces, regardless of input type or form factor, all emerge from the same core user experience and design language.

Where we are now

Our UX and SDK teams have been working on version 1.3 of Qt based UI toolkit, which allows developers to write applications that can be used comfortably with both touch and pointer interfaces. The work is still very much in progress, but some of it can be used today. You can check out the developer docs here.

Suru, our visual design language, has evolved into a new, much lighter, flatter and modern approach. It not only looks great (in our humble opinion), but helps app developers design good looking and well-functioning apps with less effort. Continuous visual and user experience refinements will will be rolling out across the whole OS (scopes, shell and apps) this coming year.

The new design guidelines for UX and UI patterns as well as Suru will be out soon. In the meanwhile hopefully these example apps will inspire you to have a look at the developer docs, get active on IRC and have a go yourself. We will also be releasing design source files and templates for the refreshed UI toolkit so that you can start applying them in your own app designs.

Dekko – Email

email-phone-tablet

The first example app is Dekko – the default email client  for mobile and tablet devices from BQ and Meizu. We have been very lucky to have the incredible talents of our community member Dan Chapman working on the development of Dekko, and the app is progressing at a fantastic rate. James Mulholland helped Dan with the UX and I have been working on the UI.

Like many apps, Dekko uses a list view to represent the primary level, and a detail view to show the secondary level. Where there’s room, these views can be displayed side by side, but on small screen screens or very shrunk windows, a PageStack showing only the list becomes the primary screen. On larger screens or expanded windows, the page stack automatically progresses into the familiar two-panel configuration. This adaptive layout is common on responsive websites, and our SDK team have built a component in the UI toolkit that does most of the hard work for you – AdaptivePageLayout.

email-desktop

The list item, which lives in the list component, is another example of ready made component that helps developers write convergent apps with less effort. The new ListItem in our toolkit has useful, well designed default layouts baked in when using ListItemLayout. It is also optimised for both touch and pointer interaction – via ListItemActions. A common pattern of interacting with list items on touch devices is to drag them left or right revealing key actions such as delete. When using a pointer, however, you would typically right click and use the contextual menu to access the same actions. Our UI Toolkit supports both types of input at all times, so you could drag the item left or right using a mobile or touch-enabled monitor, or right click using a mouse. We believe users should be free to mix how they interact with our components using whatever means is at their disposal and to their liking.

This behaviour is already baked into our ListItem component, so users will have a consistent experience when using apps, and developers will save time not having to roll their own solutions.

Music

 convergence-music
The music app is another example of the super talented Ubuntu community getting involved in building some of our core apps together with our internal teams. You might remember Andrew Hayzen and Victor Thompson from a previous interview on this blog. They have since been adding features and functionality to the app, and a convergent music app using multiple panels is currently working in a branch and will be landing in the master release soon. We are also looking at adding support for streaming music functionality, keep an eye out for this in the near future :)

music-closeup

The multi-panel music app reacts to window size changes intelligently – the album cards resize and shuffle themselves on window size changes. On smaller screen devices we have a persistent “Now playing” control bar at the bottom of the screen, but on larger screen sizes we have enough real estate to reimagine the play bar as an extra panel on the right with “Now playing” information, along with cover art, controls and a scrollable queue.

Calendar

convergent_calendar

The calendar app has been on the phone for a while but until now it hadn’t really had any UI design love or designs for larger screens.  We wanted to apply our visual language in the context of an app that is by default very minimal, allowing the few design elements to stand on their own.

Suru, our visual language, is light and flat, minimizing distractions, with carefully selected tones of gray, consistent spacing and margins to help the content breathe. We’ve added considered splashes of highlight colours that enhance the visual hierarchy without overwhelming it.

On the calendar app we are again making use of multiple panels, surfacing several layers when we have the real estate available. The same feature set of the app is of course available on all sizes, and the navigation feels intuitive with whatever input method or screen size you are using.

calendar-closeup

This design hasn’t been implemented yet, and in fact we are looking for new developers to join our Community Team. If you are a developer who would like to get involved in writing some of the core apps people use on Ubuntu – get in touch with alan.pope@canonical.com – we would love to hear from you!

Hopefully these examples have given inspiration and pointers to anyone who would like to have a go at designing apps for convergent Ubuntu. If you have any questions, don’t hesitate to reach out – jouni.helminen@canonical.com

 

Read more
Michael Hall

With the release of the Wily Werewolf (Ubuntu 15.10) we have entered into the Xenial Xerus (to be Ubuntu 16.04) development cycle. This will be another big milestone for Ubuntu, not just because it will be another LTS, but it will be the last LTS before we acheive convergence. What we do here will not only be supported for the next 5 years, it will set the stage for everything to come over that time as we bring the desktop, phone and internet-of-things together into a single comprehensive, cohesive platform.

To help get us there, we have a track dedicated to Convergence at this week’s Ubuntu Online Summit where we will be discussing plans for desktops, phones, IoT and how they are going to come together.

Tuesday

We’ll start the the convergence track at 1600 with the Ubuntu Desktop team talking about the QA (Quality Assurance) plans for the next LTS desktop, which will provide another 5 years of support for Ubuntu users. We’ll end the day with the Kubuntu team who are planning for their 16.04 (Xenial Xerus) release at 1900 UTC.

Wednesday

The second day kicks off at 1400 UTC with plans for what version of the Qt toolkit will ship in 16.04, something that now affects both the KDE and Unity 8 flavors of Ubuntu. That will be followed by development planning for the next Unity 7 desktop version of Ubuntu at 1500, and a talk on how legacy apps (.deb and X11 based) might be supported in the new Snappy versions of Ubuntu. We will end the day with a presentation by the Unity 8 developers at 1800 about how you can get started working on and contributing to the next generation desktop interface for Ubuntu.

Thursday

The third and last day of the Online Summit will begin with a live Questions and Answers session at 1400 UTC about the Convergence plans in general with the project and engineering managers who are driving it forward. At 1500 we’ll take a look at how those plans are being realized in some of the apps already being developed for use on Ubuntu phones and desktop. Then at 1600 UTC members of the design team will be talking to independent app developers about how to design their app with convergence in mind. We will then end the convergence track with a summary from KDE developers on the state and direction of their converged UI, Plama Mobile.

Plenaries

Outside of the Convergence track, you’ll want to watch Mark Shuttleworth’s opening keynote at 1400 UTC on Tuesday, and Canonical CEO Jane Silber’s live Q&A session at 1700 UTC on Wednesday.

Read more
Steph Wilson

Last week the SDK team gathered in London for a sprint that focused on convergence, which consisted of pulling apart each component and discussing ways in which each would adapt to different form factors.

The SDK provides off-the-shelf UI components that make up our Ubuntu apps; however now we’re entering the world of Unity 8 convergence, some tweaking is needed to help them function and look visually pleasing on different screen sizes, such as desktop, tablet and other larger screens.

20150602_100153

To help with converging your app, the Design Team have created a set of predefined grid layouts screen targets: 40, 50, 90 GU (grid units), which makes life a lot easier to visualize where to place components in different screen sizes.

Scheduled across the week were various sessions focusing on different components from the SDK such as list items, date and time pickers; together with patterns like the Bottom Edge and PageStack. Each session gathered developers, visual and UX designers, where they ran through how a component might look (visual), the usability (UX) and how it will be implemented (developer) on different form factors.

Here’s the mess they made…

Here's the mess they made...

Main topics covered:

– Multi-column layouts, panel behaviors and pagestack

– Header, Bottom Edge and edit mode

– Focus handling

– List item layouts

– Date and time pickers

– Drop-down menus

– Scrollbars

– Application menu

– Tooltips

 

Here are some of the highlights:

 

  • Experiments and explorations were discussed around how the Bottom Edge will look in a multi-column view, and how the content will appear when it is revealed in the Bottom Edge view. Also, design animations were explored around the ‘Hint’ and how they will appear on each panel in a multi-column layout.
  • Explorations on how each panel will behave, look and breakpoints of implementing on different grid units (40,50,90).
  • A lot of discussion was had around the Header; looking at how it will transform from a phone  layout to a multi-column view in a tablet or desktop. Currently the header holds up to four actions placed on the right, a title, and navigational functions on the left, with a separate header section underneath that acts as a navigation to different views within the app. The Design Team had created wireframes that explored how many headers would appear in a multi-column layout, together with how the actions and header section would fit in.
  • Different list item layouts were explored, looking at how many actions, titles and summaries can be placed in different scenarios. Together with a potentially new context/popover menu to accompany the leading, trailing and default options.
  • The Design Team experimented with a new animation that happens during a focused state on the desktop.
  • The new system exposes all the features of a components, so developers are able to customize and style it more conveniently.

Overall the convergence sprint was a success, with both the SDK and Design Team working in unison to reach decisions and listing priorities for the coming months. Each agreed that this method of working was very beneficial, as it brought together the designers and developers to really focus on the user and developer needs.

 

They enjoyed some downtime too…

Arrival dinner at Byron Burgers

Arrival dinner at Byron Burgers

 

Out in Soho

Out in Soho

Wine tasting in the office (not a regular occurrence)

Wine tasting in the office (not a regular occurrence)

 

Read more
Michael Hall

Ubuntu has been talking a lot about convergence lately, it’s something that we believe is going to be revolutionary and we want to be at the forefront of it. We love the idea of it, but so far we haven’t really had much experience with the reality of it.

image20150423_164034801I got my first taste of that reality two weeks ago, while at a work sprint in London. While Canonical has an office in London, it had other teams sprinting there, so the Desktop sprint I was at was instead held at a hotel. We planned to visit the office one day that week, it would be my first visit to any Canonical office, as well as my first time working at an actual office in several years. However, we also planned to meet up with the UK loco for release drinks that evening. This meant that we had to decide between leaving our laptops at the hotel, thus not having them to work on at the office, or taking them with us, but having to carry them around the pub all evening.

I chose to leave my laptop behind, but I did take my phone (Nexus 4 running Ubuntu) with me. After getting a quick tour of the office, I found a vacant seat at a desk, and pulled out my phone. Most of my day job can be done with the apps on my phone: I have email, I have a browser, I have a terminal with ssh, I can respond to our community everywhere they are active.

I spent the next couple of hours doing work, actual work, on my phone. The only problem I had was that I was doing it on a small screen, and I was burning through my battery. At one point I looked up and realized that the vacant desk I was sitting at was equipped with a laptop docking station. It had also a USB hub and an HDMI monitor cable available. If I had a slimport cable for my phone, I might have been able to plug it into this docking station and both power my phone and get a bigger screen to work with.

If I could have done that, I would have achieved the full reality of convergence, and it would have been just like if I had brought my laptop with me. Only with this I was able to simply slide it into my pocket when it was time to leave for drinks. It was tantalizingly close, I got a little taste of what it’s going to be like, and now I’m craving more of it.

Read more
Michael Hall

Convergent File ManagerConvergence is going to be a major theme for Ubuntu 14.04, not just at the OS and Unity 8 levels, but also for the apps that run on it. The Core Apps, those apps that were developed by the community and included by default in the last release, are no exception to this. We want to make sure they all converge neatly and usefully on both a tablet and on the desktop. So once again we are asking for community design input, this time to take the existing application interfaces and extend them to new form factors.

How to submit your designs

We have detailed the kind of features we want to see for each of the Core Apps on a Convergence wiki page. If you have a convergence design idea you would like to submit, send it as a file attachment or link to it online in an email to design@canonical.com along with any additional notes, descriptions, or user stories.  The design team will be reviewing the submitted designs live on their bi-weekly Design Clinics (Dec 4th and Dec 18th) at 1400 UTC.  But before you submit your ideas, keep reading to see what they should include.

Extend what’s there

We don’t want to add too many features this cycle, there’s going to be enough work to do just building the convergence into the app.  Use the existing features and designs as your starting point, and re-imagine those same features and designs on a tablet or desktop.  Design new features or modify existing ones when it makes the experience better on a different form factor, but remember that we want the user to experience it as the same application across the board, so try and keep the differences to a minimum.

Form follows function

There’s more to a good design than just a good looking UI, especially when designing convergence.  Make sure that you take the user’s activity into account, plan out how they will access the different features of the app, make sure it’s both intuitive and simple.  The more detail you put into this the more likely you are to discover possible problems with your designs, or come up with better solutions that you had originally intended.

Think outside the screen

There is more to convergence that just a different screen size, and your designs should take that into consideration.  While it’s important to make good use of the added space in the UI, think about how the user is going to interact with it.  You hold a tablet differently than you do a phone, so make sure your designs work well there.

On the desktop you have even more to think about, when the user has a keyboard and mouse, but likely not a touch screen, you want to make sure the interface isn’t cumbersome.  Think about how scrolling will be different too, while it’s easy to swipe both vertically and horizontally on a phone or tablet, you usually only have a vertical scroll wheel on a desktop mouse.  But, you also have more precise control over a mouse pointer than you do with a finger-tip, so your interface should take advantage of that too.

Resources available to you

Now that you know what’s needed, here are some resources to help you.  Once again we have our community Balsamiq account available to anybody who wants to use it to create mockups (email me if you need an account).  I have created a new project for Core Apps Convergence that you can use to add your designs.  You can then submit links to your designs to the Design Team’s email above.  The Design Team has also provided a detailed Design Guide for Ubuntu SDK apps, including a section on Responsive Layouts that give some suggested patterns for different form factors.  You can also choose to use any tools you are comfortable with, as long as they Design Team and community developers can view it.

Read more
Daniel Holbach

Some weeks ago I wrote a blog post and shared a personal view on Ubuntu’s history as a project. In there I explained (among other things) my view that Ubuntu as a project has quite often taken hard decisions to bring something new and exciting to people. The goal always was the same: bring open source in a beautiful form to as many people as possible. If I look around me today, it’s just beautiful to see what we’ve achieved. In conversations it’s easy for me to explain what I work on, almost everybody has heard of Ubuntu or Linux or Open Source. Lots of people, even folks outside the tech scene, try out Ubuntu every day, and are quite happy with what we brought to the table.

In recent months we drastically increased the pace though. It’s amazing to see how many teams work on the phone, on porting, on our app story and on making one Ubuntu happen across all kinds of devices. My gut feeling was that with every new video showing off another new working part, the buzz and excitement grew. “We actually can pull this off” seems to be the message everyone is getting. It makes me proud being part of this and happy to see that this is coming to fruition.

Starting the Ubuntu Edge project was another bold move in this regard. Not only working with carriers and hardware manufacturers on bringing out a device running Ubuntu, which is already fantastic on its own terms, but getting out a high-end device which showcases our vision for a converged device, seems to have excited many people around the globe. Press coverage, comments on blog posts and the incredible amounts of backers in such short time all seem to say “CAN’T WAIT!”.

If you are excited about “one Ubuntu on all kinds of devices”, want to help make this a reality, consider pledging as well. If you are looking for a new phone anyway, one which you can use as your PC as well, consider pledging a bit more. This is totally going to be worth it. :-)

(Can’t see the video, click here.)

Read more