Hey guys,

I am currently working on an API that makes it really easy to write an email client in QML. The API was originally intended to be used in the mobile version of KMail, but it can be used for any kind of application/plasmoid. I know that there are some guys in the VDG who are playing around with their own email client visions for a while now. With the new layout guidelines beeing published, I decided to give it a try and create a first draft for a new desktop application to get the conversation started. This is first step in the design process. I want this to be about Interaction Patterns and General Layout.

The interaction patterns are roughly based on "Getting Things Done" following what we originally intended for the mobile client. [1] The main Idea is to have "searches" instead of "folders" to browse your mail. We can think about allowing folder based browsing as well.


Full Resolution: https://drive.google.com/#folders/0B2wL ... nl6LWhTNUE

KDE PIM is still working on the port to Frameworks 5 so I had to make my qml mockup with the not so beautiful "air-mobile" themed plasma components. Icons are also still Oxygen because there a no breeze icons for mail and so on. Do not pay too much attention on how the widgets look, that will fix itself when we switch to KF5.

The mail list is still dummy data, but the mail view is using the real QML API already. The composer API is also almost ready, but I did not do the mockups yet. I do not know if I want it to be in-line (in / next to the mail view) or a separate window.

This is the first step in the design process and I would like to go the entire way with you. I am interested in feedback about the interaction patterns and general layout, we will make it pixel perfect once that is done. Like always, nothing is set in stone, everything is up for discussion - especially in this early stages. Do you have an entirely different idea about how a modern email client should be? Hit me!

Thanks for your feedback!

[1] https://community.kde.org/Plasma/Active/mail

Here are some things you could work on if you want to get your hands dirty and improve on what is already there:

• Search/Filter according to the HIG [1]
• Composer - take a look at this blog [2] for inspiration
• Attachemts in the MailView
• Alternative folder based browsing
• what you want to work on

[1] https://techbase.kde.org/Projects/Usabi ... rchPattern
[2] http://blog.weare1910.com/post/78113100 ... h-to-email

If it is really that easy to create new clients in QML in future, there is one thing I would indeed be interested in: Different users have different needs, so why not try to understand these different needs and create a family of clients, so users can use that client that best fits their personal needs...

bjoernbalazs wrote:If it is really that easy to create new clients in QML in future, there is one thing I would indeed be interested in: Different users have different needs, so why not try to understand these different needs and create a family of clients, so users can use that client that best fits their personal needs...

Yes. That is somewhat the goal of the API. To go even further: this API can also be seen as a step towards providing the building blocks for a "task-centric paradigm" that Thomas and you advertised in your "Computer: I'd like to write a summary of this meeting" talk at Akademy 2013.

However, the development of the API is in the early stages and it is only about getting the data for now. No qml components for the actual views (message, mail list,...) yet. Creating this desktop client will allow me to find out what the API should provide and how it should provide it, so that it works best from the perspective of a QML developer/designer. It will also produce QML bits, that can be transformed into reusable components for the API later on.

I see the creation of this desktop client more like an experiment where I will try to make the visions and designs of the VDG happen (Jens and Andrew had some ideas of their own AFAIK) If a great desktop client comes out of it - awesome. If not, then we are still are lot closer to an API that can be used to make happen what you suggested.

Taking this into account, it seems to make even more sense to define a small set of possible (and reasonable) email clients - so you can better understand the needed fragmentation of the API and qml components.

That's a real cool task from the interface and experience perspective

Given that this mockup is pretty close to KMail Active which we worked together on, you can assume that I like it

Actually, the VDG had hoped to be the ones presenting the first mockup, but you beat us to it, and we're okay with being second
Since our designers are hard at work designing a multitude of applications right now, I don't know when their/our mockup will land here, but I hereby promise that it will eventually.

Hi,

I hope you forgive me that I made the layout with pancil and paper.

I think about the article A Typographic Approach to Email [2] and made than the picture. The idea was to separate the Navigation from the conversation as written in [2] so the picture above is the navigation area.

Navigation Area


In the navigation area you have a:
1. Toolbar on top for the icons like
- new mail,
- replay, forward, mark, delete when you select mails
- search and settings

2. Sidebar
- with your favourite folders (bookmarks)
- search results can also be saved in the sidebar
- timeline
- people mails to and from this peoples

3. mail navigation area
as in the first screen shot, every entry have two lines.
- the first part is a icon area for mark, importend, attachment
- the second part is the mail header in the first line and the conversation people in the second
- the third part was a preview of the mail as you may know from gmail.
when you don't show the mail as in the first screen shot, than you have a lot of place you can use.
- the fourth part is for the date

4. Info Panel
when you select a mail, you get some useful informations. As I write before you have a lot of space in width.

Conversation Area

As written in [2] the conversation area should show in a new window in front the mail and in addition also the older mails. I'm thinking about something like a chat conversation with a letter style. On bottom the newest mail and the possibility to answer to the mail above.

It should also be possible to integrate the conversation "popup" into the navigation layout and to use it as plasmoid. When you can use the conversation area as plasmoid, you can write mails like you chat with someone.

Sorry I don't take the time to make a nice digital picture. I also like your mockup a lot and I know the VDG will send some really whow.

Hi

I tried to recreate the linked [2] email client because i like the typography a lot. My idea is to use this as a starting point. What do you guys think about an email client without a folder sidebar and with a letter style "email reading" part?

http://tradukt.ch/owncloud/public.php?service=files&t=dd8e9c78b64d257058df67d475111237

Cheers

Another mockup with a top navigation to access the different folders such as inbox, sent-mail or custom folders. The mail actions are close to the actual email on the bottom. One issue is the "new mail" command. Any suggestions?

http://tradukt.ch/owncloud/public.php?service=files&t=304ae42b154de35f9b7e79927481d7a8

I like seeing the different proposals so far. They give me inspiration and make me rethink my own design decisions.
Thank you guys. Keep em coming!

@andreas_k:
I like the idea of having quick access to People/Timeline searches similar to how it is done in dolphin.

I do not understand how I can read a full email with your proposal. Do I have to open a new conversation window, every time I want to do that?
This would mean opening a lot of windows and having to close every single one of them when all I want to do is browse/read my emails.

@fixu:
I was thinking about getting rid of the folder/searches sidebar as well. I have an idea on how to do it. Let's see if I can come up with another mockup.

What do you mean by "letter style email reading"?

Having the composer inline like in your second proposal frees us a lot of space in the toolbar.
I am not sure I like to have the folder selection up there thought. Selecting the folders from a horizontal list and then selecting the email from a vertical list sounds rather clumsy to me. It might not matter that much if you rarely change the folder though.

thanks for your feedback.

mbohlender wrote:What do you mean by "letter style email reading"?

Well that was just about the layout. Big title, serif font, it kinda looks like a letter to me. Sorry for the confusion.

mbohlender wrote:Having the composer inline like in your second proposal frees us a lot of space in the toolbar.
I am not sure I like to have the folder selection up there thought. Selecting the folders from a horizontal list and then selecting the email from a vertical list sounds rather clumsy to me. It might not matter that much if you rarely change the folder though.

As you say it frees a lot of space, thats why i put it there, but i have to admit that i am not sure about the interaction pattern. maybe it is indeed strange to select the folders on top and then switch to the vertically listed mails.

mbohlender wrote:I do not understand how I can read a full email with your proposal. Do I have to open a new conversation window, every time I want to do that?
This would mean opening a lot of windows and having to close every single one of them when all I want to do is browse/read my emails.

Yes that's right. You have two views one is the navigation where you have a preview of the mail and when you want to read the mail conversation you click on the mail and the conversation pop up. with ESC you can close the conversation on bottom you have the opportunity to answer or forward the mail. At the conversation the mail in in front, no navigation, no additional feature, only reading your mail. Style like [2] or

mbohlender

explain with the letter style.

If you think it is complicated, gmail also have a navigation and a conversation mode. When the mail is "trash" you can see it in the preview mode at the navigation and when the mail is important, you open the conversation and read the letter without distraction. with ESC you will be back fast and when you answer you have also no distraction.

[quote="mbohlender"][/quote]

usually you have to answer on one conversation, if you need two conversation you can use the feature of kwin to put one conversation window on the right display and the second on the left side of the display.

fixu wrote:As you say it frees a lot of space, thats why i put it there, but i have to admit that i am not sure about the interaction pattern. maybe it is indeed strange to select the folders on top and then switch to the vertically listed mails.

Pretty much all modern screens use a widescreen format, so usually vertical space is much more precious than horizontal space, so putting things next to others instead of above/below often makes more sense.

bjoernbalazs wrote:If it is really that easy to create new clients in QML in future, there is one thing I would indeed be interested in: Different users have different needs, so why not try to understand these different needs and create a family of clients, so users can use that client that best fits their personal needs...

An even crazier idea: how about we let the end-user re-arange his interface the way he wants. I imagine a crossover between how Calligra and the newest (30 and newer) Firefox.

Then we can provide some presets (KMail already has them for wide-screen and narrow-screen) of which widgets are enabled and where. But users can just add, move, remove, resize these parts themselves; save them as new presets; and share those online.