New mockups from Neil

robmueller · 6 Jul 2007, 10:10 PM

Just an FYI, Neil has been working on some new mockups for us. They're currently available here:

http://mockups.neilj.fastmail.fm/revision7/

In general, they're all:
1. Pure HTML + CSS layouts, no tables used at all
2. He's tried to separate out payout CSS + font/colour CSS parts, which should make it easier for people who just want to change colours/fonts

* informationstanza.html - example of a "information stanza" screen, eg preferences, bandwidth usage, etc
* discreteform.html - example of a "discrete" form, eg personalities, pop links, etc
* continuousform.html - example of a "continuous" form, eg aliases screen, domains screen, etc
* inbox.html - the new Mailbox screen

Some nice things about the new mailboxes screen to try out
- hover effect when over a row
- keyboard shortcuts (j to move down, k to move up, i to select)
- resizeable folder sidebar (just move to the edge where cursor changes to <-> and drag)
- realtime folder "search" box via javascript. should be really useful for people with big folder lists

Feedback welcome.

Rob

Chipper · 6 Jul 2007, 11:55 PM

Couple thoughts:

1) Aesthetically pleasing

2) My initial thought was, "Hmmm. I like what we have at the moment. If it's not broken..." However, I'm sure after a day or so, I would get used to it.

3) It may be more easy for newbies to use FM.

4) The "hover effect" is a real plus!

5) LOVE the resizable folder sidebar. Will this also be in effect for the columns (i.e. From, Subject, Date, Size)?

6) Only one concern: Would it still be Fastmail? Although they are "aesthetically pleasing" (#1 above), is this moving in the direction of "PrettyGraphicsMail?" One major advantage I have had with FM is that when our DSL gets sluggish, I can still access FM with lightening speed.

Overall: Good work! Thanks again to neilj for his outstanding work and effort! I remember his great job when he did the mockups for the addr book.

zhak · 6 Jul 2007, 11:58 PM

Inbox

Some things that should not be lost from current webmail:

1) Ability to go to a section of a large folder: < << [1-100] of 926 >> >
2) Clicking on the search button when search field is empty brings up advanced search
3) CSS customizability (such as the ability to turn off underlining on message subjects)

I'm sure there's more but haven't thought about it that much...

Things I like:

4) General appearance
5) Ability to resize the left pane (should be sticky across page changes/logins)
6) Collapsible left pane sections (should be sticky across page changes)
7) Holding shift to select a range of messages
8) Ability to save searches (I see it replaces the 'View: All Unread Read Flagged Selected' action row links)
9) Room for left pane 'Lables' section when implemented

Possibilities:

10) Separate (create/edit) links are not needed (either in current interface or mockup), hovering over 'Folders' should show 'Create/edit', and clicking on the word Folder takes you to the Folders screen. Same logic for 'Saved searches'.

11) Just as number of messages in folder is hidden until folder name is hovered over, so should 'empty' for Trash and Junk Mail be hidden until hover, ala AOL. Also, when hovering over 'empty' number of messages should still be visible.

12) Buttons in action row should have user-defined appearance, either in options or css (:notext) for button image only, just like general toolbars. Ability to add buttons for most-used actions.

13) Since the mockup does not show all the available options for the current 'action' drop-down, perhaps an 'Action' left pane section, normally collapsed, above the folder section, instead of a large drop-down. I don't know, many people would want the Folder section to not move...

14) Folder move/copy button hover should say "click to move, ctrl-click to copy'.

General Info Pages

Good general layout.

15) Implement 'Save' instead of 'Done' where applicable.

Notepad

16) User option to use same html editor as defined for message composition.

17) For a user with a long list of notes, the 'Create new note' button would be below and possibly out-of-sight without scroll. Use same logic as 'Folders' link or place 'Create new note' on action row.

Thanks for the request for feedback. And thanks to Neil for his excellent work.

-Jim

wam · 7 Jul 2007, 12:12 AM

Moving/Copying an email, directly, to a folder...

Since the folder pane is not in tabular form, the folder to which mail(s) are being moved/copied should be highlighted when mouse is over << of folder.

Notes...

Delete Note radio button should be in place of Spell Check and Spell check in place of delete note

Neil has done real hard work.

savirr · 7 Jul 2007, 01:10 AM

Quote:

Originally Posted by zhak

Inbox
7) Holding shift to select a range of messages

This seems to work in the current interface.

These mockups look great - thanks to Neil.

Simon

Berenburger · 7 Jul 2007, 07:16 AM

Looks very good!
One point: why are the left and the right menus in the header different aligned? I prefer to place it in one line.

henrico · 9 Jul 2007, 02:43 AM

The inbox looks nice. But I'd like to see the folder list a little bit lower. I like the shortcuts! This is really an improvement.

Jeremy Howard · 9 Jul 2007, 08:36 AM

Quote:

Originally Posted by Chipper

6) Only one concern: Would it still be Fastmail? Although they are "aesthetically pleasing" (#1 above), is this moving in the direction of "PrettyGraphicsMail?" One major advantage I have had with FM is that when our DSL gets sluggish, I can still access FM with lightening speed.

Actually, there's more opportunity to have super-fast access with this new screen. inbox.html in the mockup is 20k, whereas our current version is 40k. We will be able to provide special style-sheets designed for people with low-speed access which don't have any of the graphics.

In fact, the style-sheet Neil has designed already does something clever if you use your mobile phone to browse to it - it displays all the sections vertically one after the other. This way it's much easier to use from a phone than our current interface.

David · 9 Jul 2007, 08:57 AM

Quote:

Originally Posted by Jeremy Howard

Actually, there's more opportunity to have super-fast access with this new screen. inbox.html in the mockup is 20k, whereas our current version is 40k. We will be able to provide special style-sheets designed for people with low-speed access which don't have any of the graphics.

In fact, the style-sheet Neil has designed already does something clever if you use your mobile phone to browse to it - it displays all the sections vertically one after the other. This way it's much easier to use from a phone than our current interface.

Will Fastmail continue to support none Java script web browsers, like Links and Lynx? - not that I use them all that often these days.

**Sherry** · 9 Jul 2007, 09:10 AM

Mod: Thread moved to the "FastMail.FM General Discussions" forum.

Jeremy Howard · 9 Jul 2007, 09:40 AM

Quote:

Originally Posted by David

Will Fastmail continue to support none Java script web browsers, like Links and Lynx? - not that I use them all that often these days.

It's not a top priority, but I believe that these will continue to work fine. All the Real Work is done on our server - it doesn't require Javascript.

robmueller · 9 Jul 2007, 09:56 AM

Neil has done a great job with javascript support/non-support.

For instance, try turning of javascript in your browser, and refresh the inbox.html mockup, you'll see that.

1. The folder search textbox disappears since that's all done via JS
2. The "check all" checkbox disappears
3. The keyboard shortcut chevron disappears

All those things require JS support to work, so when there's no JS, they automatically disappear.

I think the feeling on javascript in general is.

1. The screens should work without it
2. When it's present, we should support enhanced functionality that uses it

I'd rate the above 3 features as fitting in with that philosophy nicely

Rob

David · 9 Jul 2007, 09:57 AM

Quote:

Originally Posted by Jeremy Howard

It's not a top priority, but I believe that these will continue to work fine. All the Real Work is done on our server - it doesn't require Javascript.

Thanks Jeremy. It's nice to see you drop in occasionally.

landale · 9 Jul 2007, 10:14 AM

These look great. I had moved away from using the fastmail web interface about a year ago in favor of forwarding my mail to my gmail account and using that but had been hoping that fastmail would modernize their interface so I could go back to it. This looks like a great step. I am concerned this is going to just be like the last time Neil posted a bunch of mockups a couple years ago. Everyone seemed to love them but nothing ever became of them. Is this new interface really going to happen this time and if so is there any kind of time frame?

Oh and if there was any feature I would love to see in the new fastmail interface it would be something similar to gmails emails address auto-completion when composing a message.

Jeremy Howard · 9 Jul 2007, 03:05 PM

Quote:

Originally Posted by landale

I am concerned this is going to just be like the last time Neil posted a bunch of mockups a couple years ago.

Fair call. However it's very different this time:

Neil isn't at school now - he's got time to dedicate to this
He's being paid for the work!
FastMail developers are working closely with Neil to ensure it fits our needs

7 Jul 2007, 12:12 AM	#4
wam Senior Member Join Date: May 2007 Location: Pakistan Posts: 192	Moving/Copying an email, directly, to a folder... Since the folder pane is not in tabular form, the folder to which mail(s) are being moved/copied should be highlighted when mouse is over << of folder. Notes... Delete Note radio button should be in place of Spell Check and Spell check in place of delete note Neil has done real hard work. Last edited by wam : 7 Jul 2007 at 12:21 AM.

6 Jul 2007, 10:10 PM	#1
robmueller Intergalactic Postmaster Join Date: Oct 2001 Location: Melbourne, Australia Posts: 6,102 Representative of: Fastmail.FM	New mockups from Neil Just an FYI, Neil has been working on some new mockups for us. They're currently available here: http://mockups.neilj.fastmail.fm/revision7/ In general, they're all: 1. Pure HTML + CSS layouts, no tables used at all 2. He's tried to separate out payout CSS + font/colour CSS parts, which should make it easier for people who just want to change colours/fonts * informationstanza.html - example of a "information stanza" screen, eg preferences, bandwidth usage, etc * discreteform.html - example of a "discrete" form, eg personalities, pop links, etc * continuousform.html - example of a "continuous" form, eg aliases screen, domains screen, etc * inbox.html - the new Mailbox screen Some nice things about the new mailboxes screen to try out - hover effect when over a row - keyboard shortcuts (j to move down, k to move up, i to select) - resizeable folder sidebar (just move to the edge where cursor changes to <-> and drag) - realtime folder "search" box via javascript. should be really useful for people with big folder lists Feedback welcome. Rob

6 Jul 2007, 11:55 PM	#2
Chipper Master of the @ Join Date: Oct 2003 Location: Greenbelt, MD (USA) Posts: 1,278	Couple thoughts: 1) Aesthetically pleasing 2) My initial thought was, "Hmmm. I like what we have at the moment. If it's not broken..." However, I'm sure after a day or so, I would get used to it. 3) It may be more easy for newbies to use FM. 4) The "hover effect" is a real plus! 5) LOVE the resizable folder sidebar. Will this also be in effect for the columns (i.e. From, Subject, Date, Size)? 6) Only one concern: Would it still be Fastmail? Although they are "aesthetically pleasing" (#1 above), is this moving in the direction of "PrettyGraphicsMail?" One major advantage I have had with FM is that when our DSL gets sluggish, I can still access FM with lightening speed. Overall: Good work! Thanks again to neilj for his outstanding work and effort! I remember his great job when he did the mockups for the addr book.

6 Jul 2007, 11:58 PM	#3
zhak Master of the @ Join Date: Mar 2007 Location: Indiana, USA Posts: 1,861	Inbox Some things that should not be lost from current webmail: 1) Ability to go to a section of a large folder: < << [1-100] of 926 >> > 2) Clicking on the search button when search field is empty brings up advanced search 3) CSS customizability (such as the ability to turn off underlining on message subjects) I'm sure there's more but haven't thought about it that much... Things I like: 4) General appearance 5) Ability to resize the left pane (should be sticky across page changes/logins) 6) Collapsible left pane sections (should be sticky across page changes) 7) Holding shift to select a range of messages 8) Ability to save searches (I see it replaces the 'View: All Unread Read Flagged Selected' action row links) 9) Room for left pane 'Lables' section when implemented Possibilities: 10) Separate (create/edit) links are not needed (either in current interface or mockup), hovering over 'Folders' should show 'Create/edit', and clicking on the word Folder takes you to the Folders screen. Same logic for 'Saved searches'. 11) Just as number of messages in folder is hidden until folder name is hovered over, so should 'empty' for Trash and Junk Mail be hidden until hover, ala AOL. Also, when hovering over 'empty' number of messages should still be visible. 12) Buttons in action row should have user-defined appearance, either in options or css (:notext) for button image only, just like general toolbars. Ability to add buttons for most-used actions. 13) Since the mockup does not show all the available options for the current 'action' drop-down, perhaps an 'Action' left pane section, normally collapsed, above the folder section, instead of a large drop-down. I don't know, many people would want the Folder section to not move... 14) Folder move/copy button hover should say "click to move, ctrl-click to copy'. General Info Pages Good general layout. 15) Implement 'Save' instead of 'Done' where applicable. Notepad 16) User option to use same html editor as defined for message composition. 17) For a user with a long list of notes, the 'Create new note' button would be below and possibly out-of-sight without scroll. Use same logic as 'Folders' link or place 'Create new note' on action row. Thanks for the request for feedback. And thanks to Neil for his excellent work. -Jim

7 Jul 2007, 07:16 AM	#6
Berenburger The "e" in e-mail Join Date: Sep 2004 Location: The Netherlands Posts: 2,908	Looks very good! One point: why are the left and the right menus in the header different aligned? I prefer to place it in one line.

9 Jul 2007, 02:43 AM	#7
henrico Essential Contributor Join Date: Jun 2003 Location: Netherlands Posts: 429	The inbox looks nice. But I'd like to see the folder list a little bit lower. I like the shortcuts! This is really an improvement.

9 Jul 2007, 09:10 AM	#10
Sherry Moderator Join Date: Dec 2002 Location: USA Posts: 8,687	Mod: Thread moved to the "FastMail.FM General Discussions" forum.

9 Jul 2007, 09:56 AM	#12
robmueller Intergalactic Postmaster Join Date: Oct 2001 Location: Melbourne, Australia Posts: 6,102 Representative of: Fastmail.FM	Neil has done a great job with javascript support/non-support. For instance, try turning of javascript in your browser, and refresh the inbox.html mockup, you'll see that. 1. The folder search textbox disappears since that's all done via JS 2. The "check all" checkbox disappears 3. The keyboard shortcut chevron disappears All those things require JS support to work, so when there's no JS, they automatically disappear. I think the feeling on javascript in general is. 1. The screens should work without it 2. When it's present, we should support enhanced functionality that uses it I'd rate the above 3 features as fitting in with that philosophy nicely Rob

9 Jul 2007, 10:14 AM	#14
landale Senior Member Join Date: Nov 2003 Location: Washington DC Posts: 142	These look great. I had moved away from using the fastmail web interface about a year ago in favor of forwarding my mail to my gmail account and using that but had been hoping that fastmail would modernize their interface so I could go back to it. This looks like a great step. I am concerned this is going to just be like the last time Neil posted a bunch of mockups a couple years ago. Everyone seemed to love them but nothing ever became of them. Is this new interface really going to happen this time and if so is there any kind of time frame? Oh and if there was any feature I would love to see in the new fastmail interface it would be something similar to gmails emails address auto-completion when composing a message.