← Back to team overview

ubuntu-touch-coreapps team mailing list archive

[Design][ubuntu-emailclient-app] WIP - Concept design

 

Hello everyone,
in the past few days I worked a bit on the emailclient app with the
objective of laying out the basic user stories and extract from them
ideas for a basic UI.

Since I think that nowadays e-mail is an important part of everyone life 
I'm gonna skip reporting what are the user stories that identify the
need of an email client, but if you want we can discuss them of course!

For now I will just say that I created a mockup for the UI of a basic
email client which will let the user:
1. read incoming emails
2. create new mail of answer to incoming emails
3. mark incoming emails as important

I tried to design the UI to be as clear and conformant to Ubuntu design
principles as possible, but please keep in mind that I am a developer so
I'm very open to suggestions and modifications.

Anyway, the first screen which is presented to the user is the
following (main view from now on), which display the list of the incoming 
emails:

https://2.233.208.136/public.php?service=files&t=d3ab7a7008141ed95921af387f5bc5b2

Unread emails should be highlighted somehow, but I haven't had the time
to do it. 
By pressing on a message the user opens it on a second page:

https://2.233.208.136/public.php?service=files&t=8ca2c02e99a866c91e3a7e54ee54c8de

E-mail details are hidden in order to maximize the space for the message
itself, but can be show by expanding the dropdown:

https://2.233.208.136/public.php?service=files&t=de3cfd7b664ea0d20b4bec18765ba187

The toolbar on the 'mail details' view shows common actions that can be
performed on emails, like respoding and forwarding:

https://2.233.208.136/public.php?service=files&t=d5ac3d13c4f210d89c08ca40ad9999ad

Back on the main view, the toolbar shows actions that can be performed
on the email client, like configuring the settings and composing a new
mail. Moreover, if any email is selected the toolbar appears with the
'Actions' button:

https://2.233.208.136/public.php?service=files&t=6c381960d1157d53a2789ab8f52b9ee3

The action buttons are common actions that can be performed on a group
of emails, like deleting and marking them as important:

https://2.233.208.136/public.php?service=files&t=f4feafed91bf3c98c5fc0abf96d56995

This is the part that I'm least sure of. I'm starting to think that 
actions related to a group of emails should be kept separated from the 
actions in the toolbar that involve only the mail client itself, maybe
with a topbar in the list that appears only when emails are selected and
shows the actions as button, what do you think?

The last screen I have is the settings view, which basically is just a
list of settings for now:

https://2.233.208.136/public.php?service=files&t=f4feafed91bf3c98c5fc0abf96d56995

This is basically where I am at now. The open points are:

1. view used to compose a mail. I think it should have 3 fields always
visible: To, Subject, Message; CC, CCN and Attachments should be made
visible with some sort of expansions. 
2. Important mail view: I'm not sure if it should be a separate view or
the same main view that has a transition where the non important email
disappear and only the important ones collapse on each other.

Anyway, what do you guys think? Feel free to comment and point out
obvious things that I missed. 

Also, the images are hosted on my personal OwnCloud instance, if they
don't work for you don't hesitate to say it so that I will move them
somewhere else.

BR,
Valerio Ponte


Follow ups