Ubuntu Application Switcher | Design Portfolio

The UX Challenge

Application switching is one of the most often performed tasks in both mobile and desktop operating systems. Hence it needs to be a fluid and frictionless interaction. For this project the main requirements were:

• Full convergence: the same switcher would need to work on phone, tablet and PC desktop. • Needs to handle both windowed and non-windowed environments. • Multiple workspace support needs to be taken into account. • Needs to support all available input types: touch, pointer and keyboard. • Single code base approach (stakeholder and engineering requirement). • The existing design relying on stacked cards needs to be taken into consideration.

The main challenges: • How to create an adapting layout that transforms andcovers all use cases. • Creating consistent set of transitions and animations which would also be delightful to use and reinforce user’s metal model of the system. • Application window size can be arbitrary and vary between the windows simultaneously on the screen. • Horizontal space is limited but the design needs to scale to support 0-N application and 0-N workspaces.

The UX Approach

Guiding design principles that helped in the design process:

• Prefer subtle and unobtrusive animations to provide quick and consistent feeling across the use cases. • Utilise the screen real estate as well as possible and avoid overflow behind the screen edges. • Provide easily identifiable application info (card + icon + label). • Aim for full convergence: Same visual appearance, functionality and interactions across form factors, devices and input types. • Re-use existing Ubuntu design and visual patterns.

I wrote an interactive prototype to help in design.This turned out to be invaluable approach that helped out to identify and solve many corner use cases. The prototype also worked as partial documentation for developers.

Design mockup 1 showing the line staging feature in action.

Design mockup 2 showing the line staging feature in action.

Design mockup 3 showing the line staging feature in action.

Design mockup 4 showing the line staging feature in action.

I developed and heavily used this interactive prototype during the design process to validate and refine the user experience and find parameters for layout,animations and transitions.

The final design

The result layout is fully responsive that automatically adjusts its element sizes, margins and visibility while maintaining balanced look and feel. Application windows are cropped in to a square shape with suitable cropping algorithm and application icon and label were added to maximise application identifiability. The final design supports following functionality:

• Application switching. • Closing applications • Moving applications between workspaces • Closing, reordering and merging workspaces • Focusing on to another workspace.

The same design and codebase works across phone, tablet and desktop form factors.

Impact

The converged switcher was part of Ubuntu 10.16 release as a default Unity 8 application switcher. The final implementation is essential part of a product that got awarded: 🏆 Orange Award for Converged Computing at Mobile World Congress 2017.