GSoC 2016: Seeking Feedback on UI Design

As you can see on the Event in a Tab wiki page, I have created a number of mockups, labeled A through N, for the new UI for creating, viewing, and editing calendar events and tasks.  (This has given me a lot of practice using Inkscape!)  The final design will be implemented in the second phase of the project.  So far the revisions have been based on valuable feedback from Paenglab and MakeMyDay (thanks!), and we are now seeking broader feedback from users on the latest and greatest mockup “N” (click to view full size):

Event in a Tab

Event in a Tab, UI Design, Mockup “N”

Please take a look and send any feedback, comments, suggestions, questions, etc. to the calendar mailing list / newsgroup where we will be discussing the design, or you can leave a comment on this blog post, send a private email to mozilla@kewis.ch, or reach us via IRC (in Mozilla’s #calendar channel).

Here are some notes and details about the behavior of the proposed UI that are not apparent from a static image.

The mockup is intended as a relatively rough “wire frame” to show layout and it only approximates spacing, sizing, and aesthetic details. Unless otherwise noted, functionality is the same as in the current Lightning add-on.

A responsive design approach will be used to implement this UI in HTML. As the window expands horizontally, the elements will expand with it up to a breakpoint where the two-column “tab” layout goes into effect. Then the elements will continue to expand in both of the columns, up to a certain maximum limit at which they would expand no further. (Having this limit will keep things more focused on very wide monitors/windows.)

For vertical scrolling in a tab… Categories, Reminders, Attachments, Attendees, and Description can expand to take up as much vertical space as necessary to show all of their content. In most cases, where there are only a small number of these items, there will be enough room on the page to show them all without any scrolling. In less common cases where there are many items, the content of the tab will grow taller until it no longer fits vertically, and then the whole tab will become scrollable. (The toolbar at the top, with the buttons like “Save and Close,” will not scroll, remaining in place, still easily accessible.) This approach makes it possible to view all of the items at once when there are many of them (instead of having smaller boxes around each of these elements that are each independently scrollable).  This “whole tab scrolling” approach is how it works in Google Calendar.

For vertical scrolling in a dialog window…  When the contents of the tabbed box (Reminders, Attachments, Attendees, and Description) becomes too big to fit vertically, the tabbed box becomes scrollable.  (Suggestions are welcome for the name of the “More” tab in the window dialog.)

The mockup shows the new date/time picker that is being developed by Mozilla.  It remains to be seen whether it will be available in time for use in this project.  Another possibility is the date/time picker developed by Fastmail.

Progress Report on Coding

Besides working on the design for the UI, I have continued to work on porting the current event dialog UI to a tab.  I created a bug for this part of the first phase of the project, posted my first work-in-progress patch there, and am now working on the next iteration based on the feedback.

This work includes refactoring the current event dialog’s XUL file into more than one file to separate the main part of the UI from its menu bar, tool bar, and status bar items.  This more modular arrangement will make it possible to make the menu bar, tool bar, and status bar items appear in the correct places in the main Thunderbird window when displaying the UI in a tab.  This will solve the problem of the doubled status bar and menu bar in my first patch.

The next patch will also have a hidden preference (accessible via “about:config” but eventually to be added to Lightning’s preferences UI) that determines whether event and task dialogs are opened in a window or a tab by default.

So overall, things are progressing well, which is a good thing since there is only about a week or so left before the GSoC midterm milestone, and the goal is to have phase one of the project completed by that point.  After I have finished this initial “phase one” patch, and any follow-up work that needs to be done for it, we will reach a decision about whether to use XUL, Web Components, React.js, or “plain vanilla” HTML for the implementation of the new UI design, and then start working on implementing it.

— Paul Morris

Tags:

13 comments

  1. Hello Paul,
    great mockups (and really gread addon)!
    While I personally do not need tabbed windows, the (responsive) design looks good and promising.
    I have one remark concerning the date-time picker. Until now, Lightning’s time picker is the greatest that I know: it is easy and super fast to select time using a minimum of clicks. The 5 minutes spacing is fitting in 99 % of my use cases, and the double click for selecting just the hour is perfect. Please do not replace the picker by something “just fancy”.
    Of course I do not know the technical ramifications …
    Please keep up the excellent work!
    Kudos and kind regards,
    Florian

    • Thanks Florian! Good to have your feedback, especially about the date-time picker. We’ll be looking carefully at the various options and weighing the pros and cons. Nothing is decided yet… Kind regards, -Paul

  2. Looks really nice!

    I didn’t know a new date/time picker was being developed, but as long as I can tab through the entries, type 1330 in the time field for 1:30 pm, and so on for whatever time I want to enter, then I’m okay with it.

  3. Hello Paul,

    I like the “Event in a Tab” Mockups.

    The Attendees section looks abit small. for planning a date with many attendees, I would expect to see there availability in this screen.

    • Hello Joerg, Thanks for your feedback. When planning an event, it would work like with the current lightning — clicking “Invite Attendees” opens a separate dialog window that shows the availability of the attendees. We have not really considered changing that part. (It might be too much to do in the project’s time frame.) Also, although it’s not shown in the mockup, the status of attendees (whether they have confirmed or not, etc.) is indicated in the little icon next to their name, like with the current Lightning.

  4. Please consider using Google Calendar’s UI styling for the reminder config

  5. If you’re going to use stuff in a tab that needs to scroll vertically, be aware that for some reason the tabs don’t maintain vertical scroll location, so when you switch tabs and come back to a tab, it always resets to top.

  6. I think this looks awesome. I use tabs as an intregal part of organizing to do emails.
    Love the new calendar integrations.
    I am a Thunderbird power user, can’t stand outlook as it’s buggy and a power hog.
    We’ve integrated Thunderbird for Mac and for the PC throughout all of our computers. Between Thunderbird and different apps for joining them with different Google services, we have created the outlook feel and usability throughout our officeg for Mac and for the PC throughout all of our computers. Between Thunderbird and different apps for joining them with different Google services, we have created the outlook feel and usability throughout our office.

  7. I think you need to consider how this design will scale up — what if someone invites 200 people, applies 300 tags, wants 40 reminders, etc.

    • That is a challenging use case, and it raises the tough questions about what to optimize for and how to prioritize and accommodate more common and less common use cases.

      One benefit this design offers for such a use case is that you would be able to see all of those hundreds of attendees at once, or at least as many as would fit on your screen, as opposed to having to scroll through them in a smaller sub-window where you can only see so many at a time. On the other hand, some things would be pushed down off the screen and you would have to scroll to see them…

      (See the more experimental mockups K and L for a different approach to this scaling up issue:
      https://wiki.mozilla.org/Calendar:Event_in_a_Tab)

  8. For Lightning 5.1b1. Hi…..I see Mac and Linux builds but not Windows. Any time soon?

Leave a Reply

Your email address will not be published. Required fields are marked *