Gave short twenty minute live coding presentation on Sailfish OS UI development at International Sailfish Community Event 2016.
A layout provides visual structure for the presented information and user interface controls that allow user to navigate and modify the information. Layout principles in digital media are derived from traditional printing media. Users don’t read but scan information. They expect most recent and critical information to be located close to the top-left corner of the view. Important information and actions are often granted a bit more space on the display. Margins are used to improve readability by creating clear visual groups. Spacing between the items in groups should generally be less than the size of individual items to communicate relation. Alignment is another way to create visual groups, for example vertical items that align horizontally form a list. Lack of alignment leads to unorganised look and takes focus way from the presented information. In most cases soft strategies like thoughtful use of margins and alignment provides enough visual structure for the layouts, reducing the need for explicit borders and backgrounds.
Good layouts are designed for a specific device form factor. For example on mobile devices it is often good idea to display the most common actions close to the bottom edge of the display for easy access. If you design the interface for one-handed use also take the reach of the thumb into account. Most people are right-handed making bottom-right corner of the display easiest to reach, though too much right-handed focus can make the interface cumbersome for the left-handed people. Some user interfaces allow mirroring of the controls for left-handed users.
Layouts are commonly based on only a handful of global geometry values with larger values being multiples of the smaller ones to guarantee nice alignment and grouping of the content within an invisible grid structure. Each visual item is assigned a rectangle bounding box within the grid. A good layouting system allows developers to visualise the layout grid and item borders to make debugging of alignment issues easier.
Most views are made of some kind of list or grid layouts. This is not surprising, rectangular shapes and linear stacking is optimal for flat display surfaces, leads to even margins between the items and allows the content to align nicely with the surrounding display edges. Non-linear layouts with curved paths can be used for more striking effect, but are rarely appropriate for everyday interfaces where usability trumps the more flashy qualities.
Most applications are made of multiple views, with each view playing a particular role in the design. Simple applications like calculators can have only one view, whereas more complex applications like system settings often contain dozens of views. On mobile the views are generally displayed in full screen, on desktop within a window and on browser inside the browser tabs. Each view can be presented as a hierarchical tree structure with top-level parent items often acting as containers for the visible items. Simple containers just provide normalised co-ordinate system for the child items, more complex ones also functionality like scrolling, clipping and layouting of the child items. Child items inherit many other properties through the parent chain like the visibility, opacity, scale and rotation.
Last spring marked 10 years of working in the mobile industry for me. During that time I have participated in building user interfaces and frameworks in quite a few different programming languages and operating systems for many different mobile devices and products in Nokia and Jolla. For almost as long I have been jotting down notes about the craft, with the intent of some day using the material as a basis of a book. Most books about user interfaces are either written by engineers targeting specific programming languages and frameworks with limited understanding of design concerns, or written by designers lacking credible technical backbone and understanding of how to realise the designs they present. Most interesting things happen at the intersection of disciplines, my aim is to write a book that merges the two fields in one seamless, coherent body of work.
Learning to program is a lot like learning a foreign language. To be any good in it, you need to read a lot of other people’s code and write a lot of new code. Getting fluent in programming takes time, but like any practice reading somebody else’s code becomes easier the more you do it, and the more you write the faster you are able to produce working functionality and less mistakes you will make while writing. Young developers joining the industry often start their careers by maintaining existing software and end up writing fairly little new code, which is a real shame as that means it takes them awfully long to get productive and confident enough to trust their own thinking.
Last weekend I started playing with the new Qt 5 particle effect system. One interesting effect I found in the examples was using custom particles and OpenGL shaders to color the moving particles, producing a cool-looking image on the screen made of “live” pixels. For this blog entry I have drawn an image of a skull, which in the example gets rotated and scaled across easing curves to further enhance the effect and finally fed to the particle system.
Falling Cubes example shows two hundred cubes falling across the view port. The cubes have been colored using non-realistic Gooch shading, where the mesh surface color is mixed with warm and cold colors using surface’s normals. Gooch shader has been written in OpenGL GLSL Shading Language. Falling animation is implemented using SmoothedAnimation element.
Finding a good color palette for your project can be difficult. I’d love to learn the mysterious formulas behind harmonic color patterns, but so far coming up with suitable combinations has been mostly a matter of trial and error: the examples below are no different. If you don’t want to go through the hassle of inventing the schemes yourself, Adobe’s Kuler website is filled with ready-made palettes.
Randomly colored wall of horizontal strips
Randomly colored wall of vertical strips
Vertical segments of horizontal strips
Horizontal segments of vertical strips
Horizontal Flow example shows how to implement a horizontally flickable list of items like a list of album covers. The component is based on the PathView element. Also, horizontal alphabetic scrollbar is provided on the bottom of the page for quickly jumping to a new position. Horizontal Flow also supports arrow key-based navigation for media center-style UIs.