Tag: User interaction design

Initial Developer Documentation for the Librem 5 Phone Platform

At Purism, we are just as excited as you are about the the development boards that will be distributed this summer. Once a person receives their development board, their first thought will be “This is great! Now, what do I do with it?” In anticipation of the technical guidance that will be needed, the developer documentation effort has begun. You can already see the current state of the documentation at developer.puri.sm

Goal of the Docs

The developer documentation is there as a guide for getting a new developer setup and ready to start having fun! This will include plenty of examples that will help you along towards whatever your goal with the development board may be.

There will be technical step-by-step instructions that are suitable for both newbies and experienced Debian developers alike. The goal of the docs is to openly welcome you and light your path along the way with examples and links to external documentation. These examples will aid you from the start of unpacking your development board to building and deploying flatpak applications to it—and eventually including your package into PureOS. Included, you can expect examples on how to use certain tools like flatpak, the IDEs used to build flatpak applications, and UI tools to help you design apps. The design of the Librem 5 phone interface will also be outlined in detail to provide insight into the human interface guidelines that will be followed by the core applications. Use the design section to learn about gestures you can expect on the phone. Apps you design or port to the board can use these gestures too!

Please note that the docs are not a complete tutorial on how to use all of the development tools required. There are existing documentations available for each specific tool so there’s no need to reinvent the wheel. Instead, you will be directed to those locations online so you can research further on a specific tool.

We welcome all test and development efforts that volunteers have to give, so there will also be information on volunteering and how to become a Purism community member in general.

Work in progress

The documentation is in a constant state of flux. Content is being added daily and reorganization still occurs from time-to-time. If you no longer see a page there, just search for it because chances are it has been moved to somewhere else within the site instead of removed. The aim is to write documentation that is helpful and intuitive so it is important that an intuitive path is laid out. This developer documentation is still pretty new but is filling out quickly so that you are ready to hit the ground running with your new development board in June!

There will be a separate announcement in the next few weeks on this same blog to call for volunteers so get ready!

Librem 5 puzzle pieces starting to come together—graphics, adaptive applications, docs and SDK

The Librem 5 is a big project. And like a lot of big projects, as you probably know, it can appear overwhelming, until you can break the parts down into logical steps. Like a large puzzle scattered on a table, our team has been organizing and beginning to assemble all the pieces. This is very exciting to progress through the initial daunting scope, accepting the tasks, start working and then… after some time, solutions emerge and almost magically align.

In our previous blog posts we described what we were starting to work on, and these efforts began to prove themselves out significantly during our week-long hackfest where part of our software phone team gathered last week in Siegen, Germany. Read more

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.

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!

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

Peter K’s Concept Art

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 Mobile UI Example
  • 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.

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.

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! 🙂