K-9: Concept: Material Redesign

[moctodot]

Design:
After trying out a new icon (#1723) I gave redesigning some parts of the app a try. I tried to stick as close to the old design as possible in terms of structure and layout to keep the apps branding recognizable. It's the first concept I've done so there may be some stuff that's a off a little ; )

Inbox:
This Screen is very similar to the old implementation just alingned with with Material Design metrics and some adjusted colors. Also the unread count moved down from the toolbar to make space for actions like search and sort as well as compact account and expunge in the overflow menu. The e-mails are now grouped by date so it's easier to quickly find the one you're looking for (only "today" and "yesterday"). Also the compose action is now a FAB in the bottom right corner.

E-Mail
The email screen itself is like an extra layer ontop of the resting UI. Ist fairly minimal to leave room for attachments and quoted text. You can still archive, delete mark as read/unread and share with the Actions now in the toolbar. The two main actions reply and forward are located at the bottom for
maximum visibility (and can be expanded with a reply all option).

Compose
Composing an e-mail is more straight forward than before thanks to the use of full bleed text fields and contact chips. Also multiple attachments can stack to save space.

Navigation Drawer
In the nav drawer you can directly switch between accounts and view the unified inbox, this saves the user a couple of taps. The expandable menu also makes it possible to add and remove accounts. Also adding the settings to the bottom unclutters other menus.

Color
The rather blank light/dark color palette is supposed to keep the attention on the content instead of distracting the user (e.g. with a bright green toolbar). The primary high contrast accent color is used only in places that are important to the current state of the UI. The secondary a bit toned down accent color highlights elements without being to dominant.

I'd really like to hear some feedback and could also do a dark/tablet version of these concepts, redesign other areas of the app or design some smaller more specific features (only if there's even interest).

If you want to look up some metrics or just play around with the source files, they're based on a 360*640 screen with xxhdpi density so 1px equals 1dp (updated everytime I add new stuff): concepts.zip

[ArchangeGabriel]

That looks awesome. :) K-9 Mail UI is definitively something that would need some love from my point of view, and you’re providing it. ;)

[Valodim]

Nice, looking good! :+1:

To drive this forward, one of the first things we'll also need is planning for features. Mockups are great to get ideas going, but it's difficult to say which things moved where etc.

One approach would be to gather a feature list for each activity, add some thoughts on how those fit into a material design, then consider if we want to keep them, move them somewhere else, or get rid of them entirely.

[levinuss]

I really like this design too. In my opinion K-9 needs definitely a new UI and this is a great suggestion!
The old flavor of K-9 is recognizable, so for me, this theme and also the icon is nearly perfectly.
I would love to see it implemented in the app and also a dark version would be very nice.

[moctodot]

Thanks!
I think you're right looking at this feature by feature is a good approach, I'll try to constantly update the post with new stuff going into more detail.
I should probably also include the things listed under the design overhaul milestone.
If you have any ideas about that I'd also be happy to work with drawings, etc. on how to implement that.

[igoralmeida]

That's really cool indeed! One thing I would like to see is a little space for tags in the message list. Some options:

1. Before the subject like mailpile (probably steals too much space)
2. Colored background like Thunderbird's list (kind of ugly but useful)
3. Little colored rectangles (or label icons) in the lower right like outlook (useful, multiple tags easy, unfortunately no tag text)
4. Colored rectangles with text like Thunderbird's message header (could be in the last line, but can also take too much space)

Would any of these make sense in this design?

On December 20, 2016 6:08:50 PM GMT-02:00, moctodot [e-mail] wrote:

Thanks!
I think you're right looking at this feature by feature is a good
approach, I'll try to constantly update the post with new stuff going
into more detail.
I should probably also include the things listed under the design
overhaul milestone.
If you have any ideas about that I'd also be happy to work with
drawings, etc. on how to implement that.

--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/k9mail/k-9/issues/1859#issuecomment-268345229

--
Igor Almeida (móvel)

[moctodot]

Pretty sure I could fit something like that in there, but I don't know if K9-Mail has tags or if it is a planned feature. Could be that I'm just too stupid to find them in the actual app if not that would be a neat feature :D

[igoralmeida]

There's an obsolete PR for it that I really want to come back to someday.

On December 20, 2016 7:27:16 PM GMT-02:00, moctodot [e-mail] wrote:

Pretty sure I could fit something like that in there, but I dont know
if K9-Mail has tags or if it is a planned feature. Could be that I'm
just too stupid to find it in the actual app if not that would be a
neat feature :D

--
You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/k9mail/k-9/issues/1859#issuecomment-268364268

--
Igor Almeida (móvel)

[moctodot]

I'll see if I come up with something that looks decent

[Valodim]

I would prefer if we stick to redesign here exclusively, adding features at the same time is bound to become very messy.

The most difficult part for the overhaul is probably going to be the settings, btw. :)

[igoralmeida]

@Valodim by all means. I just wanted to encourage people here to do the UI work for me, and eventually I'd try to get the backend working again :)

[moctodot]

Swipe to archive/delete

Once the Feature is used a snackbar pops up indicating successfull completition and allowing to undo the action.

Selection

Selecting e-mails allows to delete, archive, mark as read/unread, move, copy and select all. You can also hold and slide down to select multiple e-mails at once.

Which one do think I should do next? Settings? Set up? Tablet layout?

[ArchangeGabriel]

Very nice, this would save me a lot of time everyday. :)

Settings should go next, and after that tablet and setup. From the most actively used to the less (ok, maybe tablet vs settings is not that clear :p).

[jmccabe]

I just wanted to add that I think this looks cool. I'm an ex-K9 user who moved away (I think) when I started having issues with the database when I was using POP3. I moved to AquaMail but, as it's been acquired by MobiSystems, I'm looking to replace that. Now I don't use POP3 any more the possibility of coming back to K-9 is quite high but the UI is definitely something that's due a makeover as it basically hasn't really kept up with the time. I've contributed to K-9 in the past so might be able to help once I get a new laptop (that doesn't die a horrible death when I try to run Android Studio on it), but I'm not really an arty type so would rely on other people's graphics ideas.

[moctodot]

Account Settings (Updated)

I took this tabbed approach because so here would'nt be any strings needed to be rewritten (and translated). The color palette is based on the account color picked by the user. When swyping to general settings you return to the apps standard color sheme. The about and settings backup options moved here aswell (they're also visible under the general settings tab I'll do a concept for that one soon).

[Valodim]

Nice, I like this. Were you inspired by some app for the layout? I notice it's not what Gmail does :)

[moctodot]

Yes I took some inspiration from the Android settings app itself because of the sheer amount of settings :D

[moctodot]

General Settings & About (Updated)

Nothing fancy. The layout is mostly the same as in the other tab but using the main color underlines that these settings affect the whole app not just one account.

Next up I should probably do the Folder Settings.

[cketti]

I want to change the About screen from a dialog to a full-screen activity. We should probably also have multiple tabs for the different kinds of information (copyright/app license, used libraries/licenses, changelog, etc).

I like the settings screen. Although I'd probably switch the order of "Account" and "General".

[moctodot]

Changing the order makes a lot more sense. I didn't even think of that. I'll add that tomorrow because now I need to get some sleep :D

And for the about screen I'll try out and see how it looks. Maybe some kind of expandable list could work aswell.

[ccoenen]

Account would also (probably) be the account name or main email address. Personally, I have three addresses configured, but a friend of mine uses as much as seven accounts in K9.

[jmccabe]

@ccoenen Do you mean the tab title "ACCOUNT"? I think it makes sense as it is. I presume the dropdown allows you to select from multiple accounts which will then have their own settings shown below it. FWIW, I'm currently still using AquaMail as my main email app and have 10 accounts set up.

[ccoenen]

Yes, that's the title i was referring to. I imagined it being the title, because that way switching between them is one step less:

• Many tabs (general, account 1, account 2, ...): Click the tab.
• Two tabs (general, accounts): Click account-tab then select the account from a list.

The two tab approach would get especially unnerving if you make, search or compare settings across accounts.

[moctodot]

I just edited the designs to match some of your suggestions. What do you think?

[Immontalis]

i love it

how do you make the design ?

can make a folder with separated images?

[jmccabe]

@ccoenen I see your point about the multiple accounts and comparisons etc but, as I have 10 accounts, if each one had a separate tab, I'd certainly not expect to be able to see all 10 at one time, which means I'd have to swipe through them. There's probably a point where you'd have to choose between individual tab per account, and one tab and drop-downs.

[moctodot]

@Immontalis I use Inkscape it's open source aswell. There is a .zip in the top post that contains all the source files, I update it everytime I add something new.

[Valodim]

Going to settings doesn't happen that often, and most people don't have many accounts. Optimizing for super minimum number of clicks for the many accounts use case doesn't seem very useful.

[jmccabe]

@Valodim Interesting comment Vincent; does that not suggest the "Unified Inbox" concept is also pointless? How do you know most people [I guess, those using K9 in particular] don't have many accounts? I'm intrigued really; one of my main reasons for looking at clients like K9, AquaMail and so was that they cleanly and simply supported multiple accounts. It seems to me that the majority of major email providers, GMail, Yahoo, Hotmail etc, provide perfectly capable Android email clients, for single accounts, but are a bit sub-optimal when you have multiple accounts. I'm not sure why many single-account owners (who may just live with what they get by default or from their sole email provider) would bother looking for alternatives. I do agree, of course, that "Going to settings doesn't happen that often"!

[ArchangeGabriel]

@moctodot Could you propose an UI for attachment in mail view? The current one (in K-9 5.0x or 5.2x) is definitively not good, the Material Redesign could be a good time and place to fix this.

[moctodot]

Sure, It should be pretty much the same as in the Compose screen I think just with an overflow menu instead of the remove icon. And you're probably right an attachment makes a lot more sense at the bottom of the screen.

[philipwhiuk]

@jmccabe Long term we want to be useful to everyone, not just people with weird set-ups. It's the combination of 'settings and lots of accounts' that makes it not a good target for optimising for.

And there's a difference between 3 and 10. Many people will probably have 2, a fair few might have 3. But 5 or more is abnormal really. I have lots but I develop an email app and most of them are for testing. I don't expect many to own more than 3.

[jmccabe]

Oi @philipwhiuk, who're you calling weird and abnormal ;-)

Seriously though, in principle I agree; there is a difference between 3 and 10 etc.

I do some "IT" management for a small, hobby-based, organisation and, as part of trying to improve communications between members I've been looking at the way we contact each other. I'd say slightly more than half the people I've dealt with in that group only have one email account.

My point really is that, even with the "fair few" you mention having 3 accounts, trying to fit each account onto a separate tab with limited screen real estate (in portrait view on a phone in particular) might be pushing it a bit and make the screen look untidy, unless you use scrolling.

It's obviously a trade-off and finding the 'right' or 'best' way to deal with it is very subjective, so I wanted to identify my position in the hope that consideration would be given to people with abnormal numbers of accounts, as well as more normal people.

[rugk]

Very nice ideas in general. What's only missing in the compose picture are the new security indicators (locks) introduced in K9mail 5.2.

[rugk]

As for the account/tab thing: Can't it be as it works currently? When you are in your inbox of one account show the tabs "general | account" where account is your current one. When you are in another one, show another one, etc. And when you are somewhere else (i.e. in no account inbox or in the combined inbox) just show the general settings only.
This would work for all accounts.

Also one should not forget the black design. So whatever redesign you do, please don't kill the black design! Especially - and I know this is against Google's material guidelines - (also) provide a black AMOLED design where the background screen is really black (#000). At least as an additional design for users with AMOLED screens. (You might also call it "night" design or whatever…)

[moctodot]

Sorry I haven't had the time to do anything new recently. I have a lot going on at the moment but I'll try work on this a little when a find some time.

[moctodot]

Attachments (Updated)

There has been some discussion about this (#2067). So this approach could be a little bit too simple. I figured that if you hide the quoted text by default, you can reach the attachments at the bottom quite easily. Therefore I didn't add another button to scroll down there (Gmail, Outlook, ... all do the same).

In order not clutter this screen I added an expand function that contains multiple attachments.
If there is just one attachment then the overflow button replaces the expand button. The attachment counter would be unecessary aswell in that case.

[rugk]

Nice idea 👍 , there should just be some file icons (on the left where there is enough space) for the different file types IMHO.

[ccoenen]

love the collapsed quoted text!

Will the image-attachments keep their thumbnails?

[moctodot]

Thanks, didn't think about adding icons and thumbnails! I edited the post. :D

[rugk]

Another idea for the attachment issue: Why not "pin" the attachment text to the bottom, so it shows the mail text above it and you can always see the attachment indicator without scrolling.
And if one taps on the attachment indicator you higher show it right now or scroll down and show it. (don't know what would be better)

[Valodim]

pretty sure that's how it's intended in the screenshots...

[rugk]

Okay 😄

[ccoenen]

If it's always there, I'd like to point out the huge size of the Reply and forward buttons, which also probably remain visible at all times. Together with the top navigation bar, they take up almost half of the screen height.
Maybe not a problem on a 5.5"+ Smartphone, but certainly something that might annoy people.

[moctodot]

Actually I thought both should stay at the bottom within the same layer as the actual email itself :D
Many clients do this a similar way. As @ccoenen said this would be a size issue otherwise. Also I found this to be the less cluttered/obstrusive solution.

[ArchangeGabriel]

I definitively agree with @moctodot and @ccoenen that attachments and reply/forward button should be within the same layer at the email itself, and I thought this was the reason the attachment button was moved to the bottom in the current version.

With the “quoted text” feature this shouldn’t be an issue, while having an huge part of the screen constantly occupied by those things you should only need once you’ve fully read the email certainly is. ;)

[ccoenen]

Is the button at the top (next to delete) the "archive" function? On the phone, my usage is probably 50% archive, 30% delete 15% Starring and 5% answering (very loosely estimated). If so, this current layout will make me extremely happy :D

[cketti]

Please try to keep the noise in the issue tracker to a minimum. Messages about how excited you are with the design concept or how well it'd work for don't belong here.

[ccoenen]

Messages about how well something would work in the future are a key part of a redesign in my opinion. This goes beyond simple theming for the existing app, it is aiming to change a lot of usage patterns along the way. It is a good idea to play "what if" for a while before actually implementing them.

(I also think, a little cheering is in order for this kind (and quality!) of work. @moctodot certainly deserves it!, but I will limit cheering to using the heart/hooray icons below a post, from now on)

[ChriKn]

If you ever make a fork with your icon / theme rebase, count me in. I would be glad to pay a couple beers for this !
You really have some talent for UI design looking at this and your icon (which I now use, thanks to Nova launcher's Icon replacement)

The only change I would propose to the actual mockup is darken the initials of accounts (those in circles) when the sidebar is open. That and adding a bit saturation to the coulours surounding the contact's inital in the mail list to make it readable in low light / low luminosity.

[jackgu1988]

Great work! Only 2 things:

I would suggest the reply buttons to either be on top, or somehow smaller because at the moment they occupy to much of the screen (might be uncomfortable for landscape mode).

Also, maybe in the beginning the focus should be mostly on changing the UI of the current state of the application. Adding new features in parallel will just delay things. It is good to have a vision for the future though, in order to plan ahead.

[gsantner]

Just my 2c: I would really like to have some kind of option to enable bottom toolbar (as in current version - and everybody (/previous k-9mail users) is used to)

[rugk]

An unofficial K9 mail client with material design has been published: https://f-droid.org/repository/browse/?fdid=com.fsck.k9.material

As a question to the dev, @scoute-dich: Why not just include this redesign here? / Help in this thread?
Getting this upstream should be your first goal…

[scoute-dich]

@rugk I themed K9 for my personal purpose. As I don't understand much from developing, I'm not sure how to help here. Is this here only a concept or is there an existing branch anywhere to contribute?

[rugk]

It's still a concept, but I am sure you can use your ideas/theme and possibly bring it into K9 mail.

[scoute-dich]

The problem is, that I simply changed the theme to material, so the min. sdk for my fork is 21. I don't think Rasht this is a good solution for k9, since many users still run a Android version < Lollipop.

[ghost]

Hey everyone! Just a heads up. I've updated and released my 2013 redesign project into a separate repo you can find here: https://github.com/k9mail/k-9-design

It already includes user testing, high fidelity design for all screens, color themes, icon (in all sizes and optically corrected to fit a variety of devices and wallpaper colors), etc. @moctodot + other designers in this thread - feel free to contribute to it! Right now the biggest remaining ask is a centralized style guide, documentation, and annotating existing screens.

[ccoenen]

since it's a project below the k9mail namespace and it's obviously dedicated to design - should we close this topic and repost these screens over there split into seperate issues (issues as in "topics", not as in "problems"!) in that repository?

I like a lot of things in this particular redesign by @mocdot. It also does not hurt to weed out problems at the drawing board (i.e. before coding things up). There's a lot of similarities between the two (which I think is a good sign) and probably a few things to be discussed. Having seperate issues per screen (or perhaps even per interactive element) may help boil down what's better overall. And/or how to join the two suggestions.

[ghost]

Hey @ccoenen ! The repo includes mostly just my work that started ages ago. It's a complete redesign though, for every screen in the app, and based on user input. It also includes themes and a new icon.

I'm working on a design survey for people to comment and give feedback in. That way we can quantify it, see trends in feedback, and design accordingly. I'd say that would be the best way to give feedback and present opinions for the design language as a whole!

As for screen specific feedback - I'm not sure. Perhaps starting an issue per screen is a good idea.

But it might be better to wait until we get some preliminary results from the survey. Right now a previous survey has around 300 results, mostly from non-developers—which have really important feedback devs+designers don't usually think about.

[ArchangeGabriel]

April 1st, 2018? Hope we won’t wait that long. April 1st, 2017? Not going to happen, this is likely months of work (discussing each part of the redesign, make sure everything is consistent, all of that while taking users input/feedback on the several possibilities and finally implementing this).

So for an ETA, while I’m not a dev, I would bet this won’t happen before Q3 at the very least, Q4 being more likely.

There is already a lot of work on runtime permissions for now, to be finally able to work around Doze amonsgt other things, which means that with the limited ressources of the team, Material Design has to wait.

[Larx]

Is this redesign still alive? Infortunately I can't really contribute, but I think K9 Mail needs _badly_ a redesign. I currently use a Material fork, but this only adresses visual issues, the workflows and so an need to be adopted to the 21st century, too. This thread had quite a few promising ideas, but seems to have died.

[daquexian]

@Larx The redesign is still alive. As a GSoC student I will rewrite the UI of account setup. :)

[Larx]

Good to hear that, looking forward to the results.

[Bullnados]

Some news, previews or alphas?

[philipwhiuk]

When they're done, yes. PRs, for stuff not already being worked on, to implement the work in the design repo welcome.

[Valodim]

This work is done exclusively in people's free time, so there is no schedule. Please try to keep the noise on the issue tracker to a minimum.

[BrainBlasted]

Hi, is there anything I can do to help this along? I'm not sure what branch I should base further work off of, and there isn't much in the way of discussion that I can find as to the state of this.

[igoralmeida]

@BrainBlasted if things are too far behind, you should rebase it to master.