Modernizing Kontact look
Open, NormalPublic

Description

I'd like to discuss here, with the help from VDG how we could improve the Kontact UI to look more modern and slick. This is not really about adding new features or behavior of Kontact, more about face-lifting the UI.

I started by looking at KMail because that's our main and most important component, I'll keep updating this as I get to other components.

This is the current default look of KMail in Kontact:

This is the look after some of my attempts for improvements:

  • monochromatic Breeze icons in the side pane without text
  • no frames around the side pane and the folder view thin frames to separate UI elements
  • the folder view has the same background as the window to visually separate from the message list
  • the folder view does not have tree lines
  • the top-level "Account" folder is bold, the first "email" subfolder is not indented, but is on the same level as the "Account" folder - saves us a little bit of horizontal space as we effectively reduced the indentation by one level. The "Account" folders are separated by horizontal line and large padding (visible on the second screenshot)
  • the message list theme is using palette colors
  • the vertical color bar in message view off by default

no frames version:

thin frames version:


better view of accounts;

I'd like to get some input from VDG: is this a step in the right direction? Do you have any comments, especially regarding the folder tree?

Related Objects

StatusAssignedTask
OpenNone
OpenNone
dvratil created this task.Aug 23 2017, 5:17 PM

[KMail user, not VDG person].

Removing the indentation only makes sense when the Inbox is the only toplevel folder for an account, which might not be the case; for example my Sent/Drafts/Trash folders are all at the same level as the inbox and not subfolders.

Lines in the folder view are useful with many folders, and should at least be an option.

Personally, I like the monochrome icons but dislike the removed frames.

What do you mean by "the vertical color bar in message view off by default" ? If you mean the format toggle, this is essential when defaulting to plaintext view, because people and companies insist on sending HTML mails with no plaintext version.

Fuchs added a subscriber: Fuchs.Aug 23 2017, 5:46 PM

[KMail user, not VDG person].

I need indentation and / or lines as I have tons of subfolders, and the vertical separators are desperately needed, both due to some colour themes otherwise leading to actually zero distinction between the different frames and due to otherwise a resize possibility not being visible at all.

Hi @dvratil awesome to make some design stuff here.

First off all, I would suggest to know what the VDG (= group member is everybody how talk about design and UX) is allowed to suggest. So where how fare can we go? Only the home screen with the wallpaper background or everything in the UI (toolbar, sidebar, layouts, default settings, ...)

abetts added a subscriber: abetts.Aug 23 2017, 5:56 PM

oh and sorry but I don't think the updates (screenshots) are an improvement, sorry.

"the vertical color bar in message view off by default" for sure not if it's for switching html/plaintext we add to on because nobody know how to change it.
So no please don"t set off by default.

"no frames around the side pane and the folder view" it's not a good idea I added it between viewer and messagelist as Sabine didn't able to find split. So no please.

"the folder view has the same background as the window to visually separate from the message list" but it's not separate from sidebar it seems wierd now on new screenshot.

"the folder view does not have tree lines" why ? it's useful no ?

I'll hope I can upload here everything I found from the VDG about mail app, ...

Very old design of an calendar layout from @alake

The most imported thing is that kontact has everything already implemented so you only have to focus of simply by default and powerful when needed. So thanks for ask the VDG.

I've been using this no-lines folder view for several weeks now (since Akademy, where I started playing with this) and I do have a lot of subfolders and quite a deep tree structure, but I had no problems orienting myself in the tree - the indentation feels like good enough to not get lost. In any case, we can always keep the current folder view as a configurable option - it's just switching the view delegate, so it's easy.

The vertical color bar: I could swear there's sometimes a rectangle injected into the message to switch the modes, but haven't realized there's no other way to switch back - I'll look into adding a switch button into the header part of the message - for one it will look nicer, and secondly it will allow toggling plain text/HTML in nested messages as well....

No frames: I'll try the narrow-line separators that the new System Settings uses - I actually quite like that.

For the sidebar with the mail folders I have something in mind like places and folders widget in dolphin.

most users didn't use mail folders that much so the panel view will have usefull groups for them (simple by default) and for the advanced users how will use a lot of different folders there is the folder view. how this folder view will look like, I didn't care like in the new or old layout everything is fine. It would be awesome to integrate also the calendar, contacts, popup notes, feeds into the panel than you didn't need to have the switch sidebar.

Places Sidebar Sections:

Importend

  • unread
  • Importend
  • Flagged
  • Attachments
  • Contacts
  • popup notes
  • some usefull dynamic folders and also "folders" from the other apps so you didn't need an additional sidebar

Places

  • show all bookmarked folders how will bookmarked by the user

Recent

  • Today
  • Yesterday
  • This Month
  • it's a search for mails from Today, ...

Users

  • Girlfriend
  • Mom
  • Show some users (or bookmarked users) where you will write a lot

Search For

  • Attachments

Feeds

  • planet kde
  • reddit

Accounts

  • gmail
  • office
  • Show the inbox of the accounts

you can show/hide everything like in dolphin.

dkurz added a subscriber: dkurz.Aug 23 2017, 7:16 PM

+1 for any attempts to modernize Kontact, and of course for even starting a discussion about it!

It's somewhat hard to jugde changes in an interface that you have used for years, but I think, your suggestion already looks much more modern than what we have today. From what I have seen from VDG in the past, I still expect quite some improvements ;-)

When ditching borders, please keep in mind that it also has to work for the messagelist-above-messageviewer layout. I use that at work, and the missing border between the white lower end of the message list and the white background of messageviewer makes it really difficult to resize, and also somehow disturbing. This layout also introduces a new border between the sidebar and the messageviewer.

Blue might not be the best choice for the highlight color in the sidebar. The different applications inside Kontact feel more like tabs of the sidebar, and I think the tab handle has the same color as the adjacent part of the UI in modern interfaces. What I'm trying to say is: The sidebar selection highlight color should probably be the same as the folder list background color.

When it comes to reorganizing UI elements, we might also try to surprise users less. This is especially addressed towards KOrganizer, where, for example, choosing month view deactivates the buttons for day and week view. Although this can be motivated to some degree from a technical perspective (month view != agenda view), it is very surprising to any user. Also: In week view, why can I switch month and year above the date selector widget next to the sidebar (no clue how it's called), but switching weeks requires the main tool bar (or even worse, the menu)? Also quite surprising.

"The vertical color bar: I could swear there's sometimes a rectangle injected into the message to switch the modes, but haven't realized there's no other way to switch back - I'll look into adding a switch button into the header part of the message - for one it will look nicer, and secondly it will allow toggling plain text/HTML in nested messages as well...." a switch button in header ? so you need to add in each header theme (as all grantlee theme).
For me it's not a good idea as you will add a button as Sandro tried it long time ago. It was not a real good idea.

"No frames: I'll try the narrow-line separators that the new System Settings uses - I actually quite like that." wait and see

Fuchs removed a subscriber: Fuchs.Aug 23 2017, 7:56 PM

@andreaska I see where you are heading with this and I think it's certainly an interesting idea and worth exploring further, but it's out of scope for this particular task, which is more about face-lifting. Feel free to open a new task where we can try to experiment with this further. I don't know if it's something that would fit into KMail directly, but it could be seen as an alternative mode to entire Kontact....

Re KOrganizerc- not being able to switch to Day view when in Month view is certainly a bug - again something out of scope for this task.

@mlaurent yeah, I remember Sandro tried that, but I can't remember why it did not work in the end, I'll have to dig back. In any case, I'd like to do something about that panel, maybe making it horizontal rather than vertical....

and the conversation view for the mail section.

as you can see the header is shown once cause everything else is a reply to the same header from different users. if you have avatar support you can also add a small avatar, like you have it in the phab "conversation"

As the header was shown only once the thread is shorter and you have more space for other stuff.

dvratil added a comment.EditedAug 23 2017, 8:02 PM

@andreaska Looks nice :) Also something worth looking into, It might not even be that complicated to implement....but out-of-scope for this task as well :-)

Edit: I'd also like to have a "conversation" view, similar to what Gmail does but that's super-tricky to get right....

dvratil renamed this task from Modernizing Kontact to Modernizing Kontact look.Aug 23 2017, 8:03 PM
dvratil updated the task description. (Show Details)
dvratil updated the task description. (Show Details)Aug 23 2017, 8:06 PM

the e-mail view (detail view) if fine for me maybe you can add an inline delte, reply, forward, ... action than you can remove the toolbar.

Also have something like you see in phab where you can see the selected mail but also the next and preview ones.

so when you are interested into some facelift, ping the VDG. As you saw in the two quick mockups it's not another application is't kontact you have there the folder view OR a panel view so simple and advanced and you have the conversation view which you already show on your screenshot only without show the header for each conversation mail.

As I wrote I don't think that the updates are an improvement to the existing design. so -1 from me.

Where is the header from folderview? If we don't have it we don't have access to column settings as "size icon" as "show unread"/show size etc. We can't hide/show tooltip etc.

dkurz added a comment.Aug 23 2017, 8:15 PM

Where is the header from folderview? If we don't have it we don't have access to column settings as "size icon" as "show unread"/show size etc. We can't hide/show tooltip etc.

I never knew there was such a context menu. so it might not be the best place for those settings anyway.

@andreaska well that's why I cc'd VDG on this from the beginning :-)

Where is the header from folderview? If we don't have it we don't have access to column settings as "size icon" as "show unread"/show size etc. We can't hide/show tooltip etc.

I removed it for now - the usefulness of those options is questionable and I think we should aim more at simply honoring KDE-wide settings regarding icon sizes, and just decide to have tooltips always on. Regarding toggling size/count/read/unread - this view I'd just go with simply showing the unread count in parenthesis, no other options. Is it really useful to see message count/size in the folder view? You can always read it in the tooltip, but otherwise I think it's kinda useless....In any case I would keep the old folder view as an option (we already have message list themes, message viewer themes, we can easily have folder view themes :-)) and the old view would keep all the features preserved.

Another reason why I removed the header is that I really don't like how it looks like in Breeze with a scrollbar - notice on the screenshot how the scrollbar goes all the way up next to the header, seemingly cutting-off the header? I think it's quite ugly. It also did not look well in combination with the same-as-window-background.

""Is it really useful to see message count/size in the folder view? " for size yep it's useful otherwise we need to open each folder settings to see which folder is very big. For sure it's useful.
And there is option to sort manually or automatic folder. We lose this feature.

@mlaurent: we already have View -> Message List -> Sorting, we can move this functionality into View -> Folders -> Sorting and remove it from the folder view context menu altogether. Regarding the folder sizes, how often do you check that? Or how important that information is that we would need to have it here....if you really need that, you can switch into the "old view" and see the size there...

alex-l added a subscriber: alex-l.Aug 23 2017, 11:57 PM

@dvratil Hi, I did a quick mockup, it misses a lot of KMail widgets like the filter and buttons but I hope you get the ideas:

  • folders grouped by account in tabs
  • in thread view don't repeat the object for each reply
  • profile pictures in thread view (from Gravatar & Co)
  • in the thread view each reply has a preview line of the content to quickly find the message you are looking for
  • the reply area is under the mail view (in the mockup there aren't the controls, as I said above)

"Regarding the folder sizes, how often do you check that? Or how important that information is that we would need to have it here...." each time that I need to clean up my folders.
"if you really need that, you can switch into the "old view" and see the size there..." great improvement :)

rjvbb added a subscriber: rjvbb.Aug 24 2017, 9:57 AM

What is it with this infatuation with looking "modern" or "slick"? UI interfaces should look timeless, IMVHO (

)
A few quick thoughts:

  • icons: don't force any particular icon theme on users. Not as long as you're using themed icons (= not your own dedicated ones) and Plasma allows users to pick an icon theme (the day that goes out the door, KDE goes off my systems). You wouldn't want to improve inconsistency, would you?
  • palette colours in the message list: OK to use them as the default, but since when does the palette have specific colours for the various email message states? It should remain possible to customise the text attributes in this list (colour, font weight, size and type).

One area of improvement I may have missed but that doesn't seem to be mentioned: the backdrop image in [https://phabricator.kde.org/file/data/t47r5syqd4zx57rjevpv/PHID-FILE-o5kdshjxiht2u4gp2qru/preview-kontact-modern-2.png]. That looks neither modern nor slick, but ridiculous and stressful (google "visual stress" and Arnold Wilkins). It's beyond me why that area isn't simply filled with an appropriate background colour from the user's colour palette.

prh added a subscriber: prh.Aug 25 2017, 3:18 PM

"Is it really useful to see message count/size in the folder view?" I don't bother with the size, but the counts are essential to show where I have new messages.

And please do not make tooltips mandatory. The first thing I do when setting KMail up is to switch those intrusive things off.

I don't understand what "modernise" means, nor why it might be desirable. An e-mail reader should be plain, functional and efficient, with no distractions or surprises. Fancy tarting-up should be left to websites.

abetts added a comment.Sep 3 2017, 7:52 PM

I think that one important aspect to be understood is that the current implementation of Kmail leaves very little space for messages. I feel that in an email application the messages are the most important part of the UI, therefore, it needs more room or to be emphasized a little more. Notice this:

In my mind, we should do this instead:

We need to first:

Define visual priorities
Maximize space used
Reduce clutter

In T6854#107718, @rjvbb wrote:

What is it with this infatuation with looking "modern" or "slick"? UI interfaces should look timeless, IMVHO (

)

+1 in general UI's for specific Applications (in this case PIM Suite) didn't look that different. You have a mail list view and a detail mail view. It's the same in KMail, Kube, Outlook, Thunderbird, ... the difference is in detail.

ochurlaud added a subscriber: ochurlaud.EditedSep 3 2017, 9:13 PM

To solve this particular problem (Where to put the Kontact toolbar to switch between views), I would take inspiration from MS Outlook, that solve it quite nicely I think:

Bottom left, you have buttons, and you can put your favourite used first (in my case it would be 1) Kmail, 2) Korganizer 3) Zanshin) and have the other ones in the "..." or if you use everything, use 2 lines of buttons.

Then of course, the rubbon of Outlook menu is terribly cluttered and the Kontact one is way, way, way better..

I would have this 3 buttons instead of bottom left (additional toolbar) to the top toolbar (as there is already an toolbar for the apps). as less different UI elements as possible. In addition you don't have that much actions in the main top toolbar in a PIM suite.

I would have this 3 buttons instead of bottom left (additional toolbar) to the top toolbar (as there is already an toolbar for the apps). as less different UI elements as possible. In addition you don't have that much actions in the main top toolbar in a PIM suite.

I don't agree : the top toolbar is used by the main view that you are currently using. If you are in email, you don't want to have things about tasks or calendars, but things about email.

Top left is where your eye goes first, so it is not optimized to have that. However the idea of putting them bottom left is great, because it's in a corner where you don't look that often as there is not much useful info. So it looks less cluttered.

I agree with @rjvbb. KMail's UI is timeless and should stay in that way. I also agree that Kontact application buttons should be moved to the bottom left as Outlook does.

rjvbb added a comment.Sep 4 2017, 8:06 AM

I also agree that Kontact application buttons should be moved to the bottom left as Outlook does.

The ones where you choose which actual application you want to use? IF moving those to the bottom it should be into the status bar, they should NOT take up additional vertical space.

Vertical space is at a premium on most all monitors, much more so than horizontal space.

Can these have shortcuts, btw?

Another option: the separator that determines the width of the view in which those icons are shown can be moved. There are applications that modify the handle so that clicking it toggles between fully closed and whatever width the user has chosen. I don't think I've seen this in KDE but it must be possible to create such a widget.

In T6854#109017, @rjvbb wrote:

I also agree that Kontact application buttons should be moved to the bottom left as Outlook does.

The ones where you choose which actual application you want to use? IF moving those to the bottom it should be into the status bar, they should NOT take up additional vertical space.

Vertical space is at a premium on most all monitors, much more so than horizontal space.

I don't think it's too much space lost. It would be the size of 2 lines of texts in the panel where you currently have the imap folders. I don't think you need to see the full tree (I never seen completely at once).

Can these have shortcuts, btw?

I'm sure they can have shortcuts

rjvbb added a comment.Sep 4 2017, 7:22 PM
I don't think it's too much space lost.

It's still an unnecessary space loss. The Kontact statusbar is empty and unused except for the "Ready" word and the summary progressbar during syncs, adding a new toolbar (or similar) is, well, someone did make that comparison with a M$ product already...

In T6854#109348, @rjvbb wrote:
I don't think it's too much space lost.

It's still an unnecessary space loss. The Kontact statusbar is empty and unused except for the "Ready" word and the summary progressbar during syncs, adding a new toolbar (or similar) is, well, someone did make that comparison with a M$ product already...

I misread your first comment : and read toollbar instead of status bar. Why not begin the status bar further right? It's an idea indeed.

Regarding M$, I was giving it as an exemple for this dry specific point because it think they did a good job, and one should not fear to take ideas from those guys...

rjvbb added a comment.Sep 5 2017, 7:05 AM

Why not begin the status bar further right?

Or simply use it for additional things and let the content decide where and when it shows.

Regarding M$, I was giving it as an exemple for this  dry specific point because it think they did a good job, and one should not fear to take ideas from those guys...

Not the good ones, no. I was referring to the toolbars proliferation in their word processor, probably a few versions back now.

In terms of customisable interfaces for this kind of application I often take Opera as an example, from before they added themes. There were lots of good ideas allowing to cook up a very slick, minimalist interface that still had all the controls you could need, possibly visible only when you needed them. That included rather complete control over the things shown in the various tool- and statusbars. FWIW they used Qt at the time if I'm not mistaken, at least on Linux.

amiguel added a subscriber: amiguel.EditedSep 5 2017, 9:02 AM

I also agree to move the left column icons to another place like @ochurlaud suggested, or adding a collapsable column like Opera has now for chat services? I think we need more space for messages.

prh added a comment.Sep 5 2017, 10:51 AM

I use KMail but not any other PIM applications. My layout has the folder list down the left, then the message list above the current message. I already resist developers' attempts to waste my valuable screen space, and I'd resent losing any more of it to bells and whistles I'll never use, or to daft ideas of modernity.

Please, KISS - no, I'm not calling anyone stupid, just reinforcing that timeless principle, which applies to UI design just as to all others.

In T6854#109433, @prh wrote:

I use KMail but not any other PIM applications. My layout has the folder list down the left, then the message list above the current message. I already resist developers' attempts to waste my valuable screen space, and I'd resent losing any more of it to bells and whistles I'll never use, or to daft ideas of modernity.

Please, KISS - no, I'm not calling anyone stupid, just reinforcing that timeless principle, which applies to UI design just as to all others.

This is only if you start Kontact. If you start Kmail, it, I'll stay as it is currently. (if I'm not misunderstanding)

Please don't be too harsh, it doesn't bring anything

amiguel added a comment.EditedSep 5 2017, 10:45 PM

Here are some ideas, i think Kontact needs more space for content and less for options.

Version 1

Version 2

Version 3

Feedback is appreciated :)

rjvbb added a comment.Sep 5 2017, 11:02 PM

I don't like layouts where the message list taller than it's wide. That's fine for folders, but I want to be able to see the whole (or close to) of the subject, enough of the sender, the date and message size. Without having to scroll (see the screenshot I posted).

@rjvbb I also prefer that view, but you can change that on menu options right?

rjvbb added a comment.Sep 6 2017, 7:52 AM

Actually, in KMail4 it's a bit hidden in the Configure KMail/Appearance/Layout tab, as "show message preview pane below vs. next to the folder list", possibly coupled to the long/short folder list view.

I wouldn't be overly surprised if a significant number of users never get that far and thus never figure out what additional layouts can be configured (unless there's some sort of first-run wizard, I honestly can't remember that).

I think in Kmail for Plasma 5 the vertical view is default, i remember i had to switch to the split one.

abetts added a comment.Sep 6 2017, 3:21 PM

I feel @amiguel seems on target with his perception. He is giving the content the most prominent space in the UI. We should also allow the columns to be resized (as they are right now) so that the user has the control to change the UI as they see fit. Hiding a sidebar is a very common practice nowadays in many UIs that need more space for content.

januz added a subscriber: januz.Nov 7 2017, 12:39 AM

Any movement here?

Just minor changes, there are more pressing issues right now than the looks :) Probably a good topic for discussion at Akademy, Phabricator is not a good medium for this kind of conversation.

@dvratil currently using KMail 5.8.3 on Fedora28. I seem to have lost the ability to show the number of unread emails in parentheses next to the folder in the folder view, as well as showing folders with unread emails in bold.

I didn't see any option to restore it. Is there a way to configure this back ? this discussion seems related.

Thanks,
Romain.

ognarb added a subscriber: ognarb.May 6 2019, 9:54 PM

Here are some quick qml/kirigami experiences:

Here are some quick qml/kirigami experiences:

I like the Summery quick qml/kirigami experiences page a lot it's easy to understood and you get an good overview. maybe give the user the idea that the summery page is also linked to the different sections in Kontact. I'm thinking on something like colors that are related to todo, kalender, kmail, ... add an event, ...

but for me it's an great starting point, which will work well. I only want to say that the design language should be shown in the different apps of kontact to.

What I also like is to use for the summary page qml/kirigami, cause for some tasks I learn from my phone that the phone UI is better than the desktop UI. eg. for delete and archive spam mails. So the summary page can give the user the option to have something like an mobile UI, or something like googles inbox. But in the different apps you have the full featured kontact suite.

rjvbb added a comment.May 7 2019, 9:00 AM

(User, not VDG member)

In case it isn't already too late to voice this:

In my very humble but very serious opinion the desktop version should remain traditionally widget based, not be moved to QML/Quick. Phone UIs can work great ... on phones and tablets (but have been taking serious hits in the post-iOS-7.0 era).

how we could improve the Kontact UI to look more modern and slick.

You shouldn't. These are aspects that should remain a function of the local user's taste and choice of theming.

One good reason that probably gets overlooked by many: QML/Quick use different font rendering paths which for me means text mostly looks like sh*** compared to the Freetype/Infinality quality rendering I get just about everywhere else (which to my eyes looks better than text displays on my Mac and MSWin systems).

Users who prefer a phone-UI interface already can use Kube.

dvratil added a comment.EditedMay 7 2019, 9:09 AM

@ognarb That looks pretty neat, good job! Since the screenshots are only "partial", doesn't the view feel too out-of-touch with the rest of the UI? I also wonder about the colors which don't seem to be the Breeze color theme? Is that a Kirigami limitation?

If you feel like pursuing this further (=Kirigamifying the Summary), could you please create a new dedicated sub-task for this effort, so we can discuss it there separately? This is something that needs feedback and discussion from all devs and VDG.

ndavis added a subscriber: ndavis.May 7 2019, 3:00 PM

Users who prefer a phone-UI interface already can use Kube.

Indeed .
We will not port kmail/pim component to QML :)