Author: François Téchené

Director of Creative

May 10, 2018

Librem 5 design report #5

Hello everyone! A lot has happened behind the scenes since my last design report. Until now, I have been reporting on our design work mainly on the software front, but our effort is obviously not limited to that. The experience that people can have with their physical device is also very important. So in this post I will summarize some recent design decisions we have made both on the software side and the hardware product “experience” design.

Thinking about the physical shell

Our goal with the Librem 5 is to improve the visual identity of the Librem line while staying close to the minimalist and humble look that characterize the existing Librem line.

The main challenge of case design is the need to balance aesthetics, ergonomics, convenience, and technical limitations.

As you know, the Librem 5 is a special phone that will not integrate the same CPU and chipsets as usually implemented in the vast majority of smartphones in the market. Power consumption is a very important factor to take into account, but so is battery capacity and printed circuit board arrangements, and we don’t want to sacrifice battery life for a few millimeters of thickness. Therefore:

We are now aiming for a 5.5″ to 5.7″ screen with a 18:9 ratio that would let us incorporate a larger battery without affecting the shape of the phone.
We are also opting for a shape with chamfered edges (as pictured below), instead of the usual rounded ones. Not only do we think it looks elegant, the general shape would provide a better grip and it give us a bit more room inside for components.

Simplifying the UI shell

As the implementation of the Librem 5 goes on, we are quite aware that time is limited given our January 2019 target, and we are therefore focusing on robustness and efficiency for the first version of the mobile UI shell (“phosh”), which we wish to push upstream to become the GNOME mobile shell. As you may recall from our technical report from early March, we had discussed with GNOME Shell maintainers, who recommended this clean-slate approach.

We revisited the shell features and decided to split the design and implementation into several phases.

Phase 1 defines a shell that is at its simplest state in term of features and usability. This is the shell that should ship with the Librem 5 in January 2019.

This shell includes :

A lock screen.
A PIN-based unlock screen for protecting the session.
A home screen that displays a paginated list of installed applications.
A top bar that displays useful information such as the time, battery level, audio level, network status…
A bottom bar that simulates a home button (only visible when opening an application).
A virtual keyboard.
Incoming call notifications.

The “call” app is indeed a special case application on a phone, and that’s why we’re prioritizing it for the notifications feature: it has to work from day one, and it has some requirements like the ability to interact directly on the lock screen (to answer an incoming call, or to place an emergency services call).

Multitasking UI workflows, search and more flexible app notification features/APIs should be implemented during phase 2, available a bit later.

While “phase 1” might not be the all-you-can-eat features buffet some may be accustomed to, we think that this minimalist shell will be extremely simple to learn, use and will favor a quick and painless adoption. And it’ll be a great starting point.

Designing the Contacts application

The Contacts application will be at the center of the communication features. It is the application that will handle the contacts management that other applications such as Calls or Messages will rely on.

For that matter, we are adapting the existing Contacts application by designing its mobile layout and adding extra fields that will be required by the different communication applications.

Librem 5 & Fractal team hackfest in Strasbourg

This week, a few members of the Librem 5 team (including myself) are attending the 2018 Fractal design hackfest in Strasbourg, with the goal of helping the Fractal team to make a beautiful and secure Matrix-based IM application to be used on both the desktop and mobile platform. I hope to do a report on the communication features of the Librem 5 in a future post where I will talk about what happened at the Fractal hackfest.

March 10, 2018

Design report #4: symbiotic applications

Purism’s long-term goal has always been to make computers that are as convenient as they are respectful to the people that use them. The Librem products are an ethical platform and therefore should not be discriminating anyone; instead, they are meant to be inclusive of all human beings. In other words, everyone should find in their Librem a convenient and secure platform for their daily usage, and therefore accessibility should also be an important part of our ethical design roadmap.

We are aware that the road is long and that the Librem 5 is a challenging project, so we need some design foundations that favor convenience as much as it can lighten the development effort to get there.

Apps on existing platforms compete for your attention

With today’s smartphones, you usually get a minimal set of functionalities out of the box and go through installing diverse applications for your different needs. Usually those applications are proprietary and are designed around their own unethical business model; hence they compete against each other for your attention and have their own set of features to be used within the scope of the application only.

This can lead to a lot of redundancy and confusion in terms of functionality. A particularly blatant case is communication applications, where we see each application handling their own contacts logic, their own locked down and isolated protocol, and where a ton of applications will implement the same things for the same purpose (making calls and sending messages), with the focus typically being the flashiest application to attract and retain the most users. Let’s illustrate how ridiculous this is, conceptually:

Envisioning a harmonious app ecosystem

In the real, natural world, sustainable ecosystems are made of biological entities interacting together in harmony or symbiosis. This is what makes life possible over the long term.

The digital world of Free/Libre & open-source software, particularly in operating systems, is highly similar to the natural ecosystem. In this world, there is no such thing as isolating off or protecting a technology if you want to be part of the system. Business models and interests are completely different from the world of proprietary software. Best practices favor reuse and integration, improving user experience, reducing technical debt, increasing software quality and lowering development costs, with a “collaborative” system where different applications from different authors are made to work together.

The Purpose is the Feature

The idea behind the PureOS design guidelines is to replace the concept of standalone, independent and feature-competing applications with a concept of small, single-purpose, cross-integrated applications—that would interact between each other to provide a unified experience across the device (and beyond). Those small applications can be seen as “features” of the system. 1 purpose = 1 feature.

Therefore, the Human Interface Guidelines’ main principles regarding “features” development would be :

Don’t see applications as independent programs but as “features” that have a single purpose and that interact with each other.
One “feature” application is guarantor of the security of the data flow going through it. Only make your “feature” application share data with “trusted” features or networks and in a secure way.
Make a “feature” application focused on one single purpose (an email client is not an address book nor a calendar)
Make your “feature” application rely on existing features (an email client should rely on the existing address book and the existing calendar “features”)
Avoid redundancy. Don’t try to reinvent existing applications. Improve them instead.
Setup your “feature” application by default. Make it work out of the box.

Advantages

On the user’s side, the features of the device are easy to spot as they are made available through single-purpose applications displaying an obvious name. For example, the “Call” application is made to make calls, no matter the technology used behind that (e.g. Matrix, phone, voip). The “Messaging” application is used to send instant messages, no matter the technology used behind that (e.g. Matrix, SMS, XMPP). The “Contacts” application is used to manipulate and store the contacts information to be used by the “Call” and “Messaging” applications.

On the developer’s side, applications are as simple as they can be, the use cases are limited, all the logic that is not related to the main purpose of the application is delegated to other programs, which makes the application easier to design, implement and maintain.

Data belongs to the user, not the application

In this collaborative application system, where applications can interact with each other in harmony, data is not limited to the application’s logic anymore. Applications are acting as services, or “data providers”, to each other. Data can flow from one application to the other, from one device to another, from one network to another.

This concept implies the separation between data and functionality where the data belongs to the user only. The application that manipulates it is guarantor of its integrity and security.

Please note: these are guidelines, representing an overall vision. Guidelines are there simply as a way to guide application design, and to suggest best practices for application developers in general. Given that a GNU+Linux distribution like PureOS is an open platform where thousands of applications are available independently (as long as they are freedom-respecting!), you are not obligated to conform to these design guidelines to be able to distribute your application through Debian and PureOS. Furthermore, these design plans represent a broad long-term plan, not necessarily a guarantee of what will be happening “immediately” in the first released version of the platform that ships, your mileage may vary, etc.

February 23, 2018

Design report #3: designing the UI Shell, part 2

Peter has been quite busy thinking about the most ergonomic mobile gestures and came up with a complete UI shell design. While the last design report was describing the design of the lock screen and the home screen, we will discuss here about navigating within the different features of the shell.

The mock-up on the right describes the main navigation principles. It shows the basic gestures that can be used to navigate through the different features of the shell.

From top to bottom:

(N) – Pulls down the full list of notifications.
(S) – Pulls down the full list of system settings.
(Q) – Reveals the most frequently used settings.
(W) – Quick launcher (to quickly access the communication features).
(A) – (3 seconds) Reveals the list of running applications.
(H) – Navigate back to the home screen.

And below are a few more mockups illustrating additional planned features of the Shell:

The multitasking overview screen that is revealed through the gesture (A) shows a carousel of all running apps along with their icons to make them easier to spot and access in a touch.
Swiping up from the bottom of the screen, from gesture (H), brings back the home screen
The “quick launcher” from gesture (W), in this example, is launching a list of (favorite) contacts for a quick access to the communications features.

An experience for people first, not just “app stores”

Now that we have defined the main features and gestures of the shell, it should be time to take care of the applications’ interfaces next.

If the Librem 5 was “Yet Another Android phone,” I would say “Go! Let’s make a bunch of apps!” But the Librem 5 is not just a regular phone, and Purism is very different from Apple and Google in term of philosophy and business model—they have been focusing on having the “biggest” app stores, selling apps, and mining data… and we don’t do that.

Therefore, before hastily moving forward with designing applications interfaces “like the other platforms”, not only must we study the current state of the mobile industry in term of User Experience, we must also try to think on how to improve it with a user-centric paradigm instead of necessarily app-centric. I think that, in some ways, there are many areas where the Librem 5 can bring greater simplicity, making iOS and Android look over-complicated in comparison. It may sound crazy to say that, but bear with me for a moment, we’ll get back to this later on.

By understanding a few concepts, we can try to define some human interface guidelines that will help getting a better user experience by default. This won’t prevent the phone to remain a highly customizable FLOSS platform—it will just help making the Librem 5’s “out of the box” experience more useful for everyone.

February 7, 2018

Designing the Mobile Experience with Convergence in Mind

It is always great to have the opportunity to discuss face to face with community members to get the pulse of what their thoughts are and suggestions they might have for the Librem 5 project. As such, I was happy to spend time discussing at length with people attending FOSDEM this week-end. Comments from the many supporters made me realize that there are some points regarding goals and vision, in terms of design for the entire Librem line, that needed to be expanded upon and clarified. Keep in mind that although the vision for our short and long-term design goals for the Librem 5 is becoming increasingly clearer, it is of course still “work in progress” from a design perspective; things are not set in stone and therefore we are listening (and responding) to the community’s feedback.

Convergence, for Purism, is a long-term goal to unify the human experience across different devices.

A user interface is made of a layout and interactive elements. Different devices using different input and output technologies will have different requirements for layout and interaction. In this case, our approach will consist in designing “responsive” (adaptative) layouts and interaction patterns that will allow modern apps to adapt themselves to the device that it is running on. We don’t have to port/adapt every single existing desktop app under the sun to achieve that goal though, and our partners in the GNU+Linux community have aligned goals with this direction.
That approach of convergence is also about the simplicity of accessing the same data and services between different devices, transparently.
Part of our plan for convergence is about helping define some consistent Human Interface Guidelines and optimizing the development tools & documentation, in order to help developers create a great experience across devices.

The implementation of our design involves the use of existing technologies, and the UI+UX design itself is not made with a specific technology in mind. Our design work is an attempt to define a set of Human Interface Guidelines that rely on the Ethical Design manifesto and our requirements for security and privacy. The technical details of its implementation are out of the scope of this design report and should be discussed with the development team.

Designing a Mobile Experience

Over the last two weeks, we have been thinking about general human interaction principles for the Librem 5. Our idea is to define the best possible mobile interaction design principles and combine it with an “optimal” mobile shell experience. While what you will see below is simply a high-level overview of work in progress that may change before final public versions, it is setting the stage, and is a good starting point for our upcoming work, such as the communications features that I’ll soon write about in a separate blog post.

Some Basic Principles

We think that a good mobile experience should define convenience and comfort when using the device. It should take into account the hardware in all its aspects along with the many different use cases. In that regard, it is important to define principles that are adapted to the physical device. One of these principles is that one-handed usage of a phone is frequent, and so our interaction design should take this fact into account.

One should be able to easily access the most important features of the phone when holding it with one hand; it supposes touching the screen with the thumb only. That doesn’t necessarily mean that all the screen surface and features must be accessible by the thumb (given the planned 5.5″ screen size, that would not be physically possible), but that the lower area is preferable to access the most useful phone features by default. Those features would include answering an audio or video call, reviewing notifications, unlocking the phone, accessing the home screen, requesting a search or launching the most frequently used applications.

To remain useful for both right and left-handed persons, the optimal area should favor the bottom half of the screen while also avoiding going too far towards the edges (that may be more difficult to access).

The size of the touch (tap) area is also something to take into account in order to give the user the best precision when interacting with the user interface.

Action targets like links, buttons, sliders and other interactive UI elements should take into consideration a sufficient surface size to be used with comfort and precision.

A First Look at the Shell

Peter K., our lead UI/UX designer, has been working on adapting these basic principles to the overall UI shell experience :

The main navigation happens at the bottom half of the screen, and similarly the majority of the interaction with the Lock Screen would happen in the lower half of the screen. When unlocked, the phone would reveal the Home Screen and show the most frequently used applications (or features) of the phone by default. Some useful widgets may use the remaining space (our example is showing music controls and web search widgets). Swiping up the frequently used applications icons reveals the full list of applications as well as the “main” search field, that is also accessible at the bottom of the screen. Less recurrent gestures, like accessing the settings or the detailed list of notifications, are available in the upper part of the screen.

More to Come

This was a quick appetizer regarding the ongoing design effort. Upcoming work will be about finalizing the shell experience and designing privacy-respecting communication features, so stay tuned!

January 24, 2018

Librem 5 Phone Progress Report – A Design Team Assembles

We have spent the last two months building our design team for the Librem 5 Phone project. We have been studying the current state of mobile design within the free software community as well as large companies that have shown success in mobile. We have been in the planning phases of development attempting to produce an ethically designed device and now that we have a working prototype we have shifted to the process of designing User Interfaces (UI) and User eXperience (UX) for the Librem 5.

New members on the design team

Upon successful completion of our funding campaign, we started to look for a Designer to take care of the user experience for the Librem 5, and a web developer to help us improve the look & feel (and more technical parts) of our website in general. Today, I’m glad to finally welcome them publicly!

Our new UI & UX Designer is Peter Kolaković, who is very talented and had already gotten involved during the campaign by creating amazing concept art (that we ended up displaying on the campaign page and that became the basis for our potential look and feel of the Librem 5).
Our new Web Designer is Eugen Rochko, the web development wizard who already proved his skills by creating Mastodon.

We had a huge amount of talented and motivated applicants who were perfectly aligned with our philosophy of digital ethics, and so picking only two was a very difficult decision to make. Thank you to all of those who applied! We appreciate your interest, motivation, and ideas!

Unified look for PureOS devices

Peter has also been working on the look and feel of PureOS in an effort to make our systems convergent across devices: phone, tablet and laptop.

Our approach to convergence is that mobile is the motivating factor for all other platforms. We are aware that usability is different from a small touchscreen to a laptop monitor with a mouse and keyboard. We want to improve the user experience through ease of use, by creating a graphical environment that doesn’t require a steep learning curve when switching between devices. This approach is also helpful to developers who don’t want to maintain too many different outputs. Mobile design brings efficiency and simplicity first.

The general appearance of the user interface we’ll be designing is expected to follow current visual design approaches in the mobile industry. We expect our design to have a minimalistic aesthetic by default.

We are starting work on a dark theme (a “light” one will be designed as well). Here are a few mockups that we are working on (click to enlarge):

Community involvement approach

We want any of our Librem 5 UI/UX design and development work to be a direct contribution back to the parent projects that they are based on. You may be aware that we have partnered with both the KDE and GNOME projects, and so we wish to make the Librem 5 a mobile platform where the user can have a choice of Desktop Environments. Of course, KDE and GNOME are currently at fairly different levels of development with regards to mobile user experience:

KDE already has a beautiful and full-featured mobile interface (that our dev team is busy on making work on the Librem 5 hardware). Whatsmore, from a design standpoint, the KDE design team has done a great job developing a set of clean, touch driven user interfaces that make it a pleasant and functional mobile environment already; there is not much to add to KDE except for a graphical touch interface specific to PureOS. Purism’s contribution to KDE may be generally focused on hardware integration and testing, rather than design.
GNOME developers’ resources have not been focused on mobile user experience per se, so there is more work required to make GNOME production ready for a convergent Librem 5. In an effort to bring convergence across our devices which already run PureOS with GNOME, we are hoping to contribute design and software development efforts to the GNOME project. Our teams will develop and design the missing mobile components and improve the existing ones.

This is what free software is all about—not just taking existing work “as is” but adjusting and improving things that we send back for everyone to benefit from. We’re looking forward to giving development back to these two free software giants!

Conclusion

As I said in a previous post, we are working on producing an “ethical design” that:

Respects Human Rights by using free/libre technologies and contributing to them for the profit of everyone.
Respects Human Effort by unifying the user experience, making convergent designs based on a “Mobile First” approach that favors efficiency and simplicity.
Respects Human Experience by designing a modern, clean and efficient look for PureOS.

December 9, 2017

We love Ethical Design

In our wish to bring our contribution to the betterment of society, wherever we plan to work on refining our products or existing software, we will conform to the Ethical Design Manifesto. Our philosophy and social purpose have always been in perfect unison with the principles stated in the Ethical Design Manifesto, and having it as part of our internal design team’s policy is a good way to make sure that we always keep it in mind.

What is Ethical Design?

The goal of “ethical” design is to develop technology that is respectful of human beings whoever they are. It encourages the adoption of ethical business models and, all together, it is favoring a more ethical society.

According to the manifesto, ethical design aims to respect:

Human Rights: “Technology that respects human rights is decentralised, peer-to-peer, zero-knowledge, end-to-end encrypted, free and open source, interoperable, accessible, and sustainable. It respects and protects your civil liberties, reduces inequality, and benefits democracy.”
Human Effort: “Technology that respects human effort is functional, convenient, and reliable. It is thoughtful and accommodating; not arrogant or demanding. It understands that you might be distracted or differently-abled. It respects the limited time you have on this planet.”
Human Experience: “Technology that respects human experience is beautiful, magical, and delightful. It just works. It’s intuitive. It’s invisible. It recedes into the background of your life. It gives you joy. It empowers you with superpowers. It puts a smile on your face and makes your life better.”

Growing the seed of an ethical society

Working towards an “ethical society” may sound like fighting windmills. I personally see it as a global, constant yet disorganized wish that nonetheless tends to materialize from time to time through a common concerted effort. I don’t think that this effort is about changing some thing because of its unethical nature; it has nothing to do with a fight. Instead, it is about growing the seed of a more ethical thing that would exist next to it.

In line with this goal and our social purpose is the fact that we aim to work in an “upstream first” way as part of the Free Software community; in order to contribute to the common effort toward growing this ethical seed, any software development and improvement on top of an existing project is intended to be discussed and co-developed upstream first. We don’t want to reinvent the wheel and fork existing projects just because we don’t like the colors of the paint on the wall! This would only fraction the community’s resources and add confusion for users.

There are so many amazing free software projects that share our philosophy, and we hope to contribute while also ensuring these pieces of software respect human rights, human effort and human experience. These are my guiding principles for Purism’s UI and UX design projects.

December 1, 2017

Le Capitole du Libre 2017

Artwork by David Revoy

A great weekend.

A few days ago, I was at Le Capitole du Libre which is one of the main free software events in France. The event was a real success for everyone involved. There were more people than last year, the organization was amazing and I had a very good time with some very nice people.

There were many interesting talks and workshops ranging from purely technical to more philosophical and political subjects like “The Current State of Free Software in our Society”, which was the closing day debate on Saturday evening. It involved great names from the French free software community. As you can see from the picture, the talk was accessible to the deaf and so the event had a few sign language translators present. Big thumbs up for that!

Jonas, from the Purism team, joined me to give a talk as part of MiniDebConf (an event within an event).
As for myself, I was representing Purism with a booth that was showing the Librem 13 and Librem 15 as well as promoting the upcoming Librem 5.

Representing Purism.

There was a lot of interest for the Purism booth and a lot of excitement for the Librem 5. Over the 2 day event I hadn’t stopped answering questions about our products and philosophy.

One of the most recurring topics was about the availability of a French keyboard layout and the availability of the Librem laptops in Europe, especially in France.

This issue is slowly making progress as we currently have a reseller in Germany who is at this time not able to deliver outside of Germany. Regarding the reseller, I want to clarify that I may have given some people the impression that their prices were the same as in the USA, but this is not the case. I didn’t have those prices with me at the time of the event, and the prices in Euros are indeed including the German VAT. I am sorry about the confusion.

We are still in the process of finding a reseller who would deliver to France and other European countries and I suspect the French keyboard layout will happen concurrently with that. Hopefully, these changes will happen some time in 2018 as the Laptop sales and the demand in Europe keep growing.

Anyway, as I mentioned during the event please don’t hesitate to get in touch with us through our forum or by email if you have any questions or feedback.

Thank you everyone. I had a great time. See you next year! 🙂

September 21, 2017

Make your own Librem 5 concept art.

A few days ago, a very talented Librem 5 enthusiast asked me for some HD material to create his own Librem 5 concept art, so I have put together a couple of blank renders of the handset, along with the logos in SVG format.

All this design is currently a work in progress and I believe in collaborative efforts. I believe in the people’s power. I believe in the fact that we don’t own Creativity. We just own the pleasure of expressing it. I see Creativity as a global positive energy that vibrates and grows through all of us. We should never restrict its freedom of movement. Freely collaborating and sharing with the world is the essence of the Free Software movement and is what Purism is made of.

In that regard I thought I would make those files public for anyone to freely join the fun.
So, if you feel like expressing your artistic skills and your vision of what could be a smartphone that is made for user’s respect and software freedom, feel free to do so!

Download the Librem 5 Concept Pack

Enjoy! 🙂

July 25, 2017

Librem 13 Promotional Video

Let me introduce to you the new Librem 13 video.

Unlike the other videos I have made to promote this beautiful laptop, I decided, this time, to stay away from any 3D computer graphics and to shoot the real device in a studio made for the occasion.

This was pretty challenging as I wanted a black background with a reflective ground along with smooth camera and light movements. We also had to deal with things that don’t exist in the world of computer graphics like dust and fingerprints (what a nightmare that was!).

This video has been shot in 2 days and was entirely edited and color graded with Kdenlive on PureOS 8, all smoothly running on the Librem 13 itself.

This video is released under the CC BY-SA license (by Purism), so feel free to use it and share it as much as you like!