Dekko App (email)
Presenter's name
Contents
Section | Notes |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
01 Wireframes
Presenter's name
Account Setup Flow Map
Online Accounts
Add new:
Sign In (web)
Add existing:
Select from list
Setup process
Setup process
Initial state
Initial State (no accounts)
Initial state (one account)
Initial state (multiple accounts)
When no accounts have been set up, users can add one by tapping the “Add account” button.
When only one account is present, user is displayed the inbox of that account.
When multiple accounts have been set up, then a combined view of all inboxes is displayed (‘All Inboxes’).
Browse accounts
2) Browse multiple inboxes �and accounts
Once one or more accounts have been set up, the navigation drawer does the heavy lifting. It will allow users to �- Switch to a different inbox�- Switch to an account and browse their folders�- Add a new account�- View email settings.
A number next to an Inbox indicates the unread messages number.
Accounts Display Names are formed by: {Description}+{Company}.
If an account requires additional setup information, a warning sign is displayed next to it.
Problem with account setup
1) Browse single inbox
Browse folders
Browse email folders
If user taps on an account, he will be able to browse its folders.
Nested folders will be indented within an expandable list item. If the number of subfolders is <4, it will be displayed as expanded. Otherwise it will be displayed as collapsed.
Up to 3 levels of nesting will be displayed. If more than 3 levels are available, they will be flattened out in the 3rd and last level.
Leading and trailing options will be available�- Leading: Delete�- Trailing: Menu: Rename
Add an account
Accounts predefined selection
Online Accounts
This option will take users to the Add an Online Account screen in Settings.
Predefined Accounts
This middle area will show a set of most popular accounts. It will be simpler to add an email account, because most of the account information will be fetched automatically.
Manual Setup
A manual setup screen will be shown if this option is selected, which will require to input more detailed information about the email account.
Basic setup process
Basic setup
Basic setup
Accounts can be automatically set up, once the server accepts the email and password, a name and description should be given too. Company name may be optional. If a description is not given, then by default it is the same as the email address
Dynamic verification
Once username and password fields has been filled, the app would check and try to verify that information in a background process, seamless for the user. The orange progress bar on top indicates this progress.
Server settings
When automated setup has failed, Manual Setup screen will be displayed.
Username and password fields should be filled if that information has been provided in the previous step.
Manual Setup
Manual Setup (1/2)
Adding account manually
User can choose to manually add an account and fill up a form with the server settings.
The ‘Email’ input field will fill in all fields once it is filled the first time to avoid unnecessary typing.
Manual Setup (2/2)
Finishing process
Loading Message
Adding account to phone settings
If added account is compatible with our phone Online Accounts platform, the app should ask to automatically add the set up account for later use.
Add to Online Accounts
Bottom Edge UX
Bottom edge hint
This new concept shows a circular menu, following the natural movement of user’s thumb.
The movement should be as simple as possible. Lables should only appear on Commit.
In the future, this kind of menu could also be reflected (left-handed users) so it could be opened from the left side.
Bottom edge - transition
Bottom edge - end state
Bottom Edge UX - New email
Bottom edge hint
Bottom edge - message options
Inbox and Edit Mode
Inbox
Inbox
The name in the header should display an indicator of the unread messages in the inbox.
Possible states for an email or thread: Starred, Replied, Attachment, Important
Users can make use of bottom edge interaction to compose a new email.
Edit Mode
Edit mode will implement current UX patterns as we can see on other parts on the phone.
Edit Mode
Contextual options
Contextual options
Contextual Options
Swipe right to delete messages and swipe left to display most used options on email: Reply, Flag and “More”, which will display a popover menu with more advanced options such as “Reply to all, Forward, Flag, Mark as Unread or Move to Spam”.
More options popover
Refresh
Refresh email
Refresh
Pull down to refresh.
Loading state displaying a non-invasive loader control, it could be the same used on the browser, like the horizontal progress bar.
Fetching/Loading bar
Thread and Message view
Thread View
From the “Message View” the user is able to delete/archive a message and switch between messages with the thread using the arrow buttons located in the drawer.
Previous messages will be indented at the end of the message, if possible maintaining format, otherwise it will be displayed as plain text.
When the beginning/end of a message has been reached, a pull gesture will animate a vertical scroll jumping to the next/previous message.
Supported attachments (JPG, PNG, PDF) will be displayed in a separate view, with a standard header (Page stack) and an action to open in Content Hub.
Message View
Open menu
Compose a new message
Default state
Compose a new message will have by default the To, From, Subject, Attachment and Body Text field displayed.
User can �- Add Cc/Bcc fields by tapping on it. �- Scroll the view and display any portion of the screen (it’s a whole flickable)�- Tap on ‘From’ to change the sender identity (by default, the account details should be used)�- Tap on add attachment to invoke the content hub�- tap on Body text and start entering text (signature is automatically added)
When replying the view title will be ‘Reply’ or ‘Reply to All’
flickable
Multiple recipients
Reply to
Reply to All
When the text required to display all recipients exceed the available space, the string ‘& x more’ will be displayed.
Adding recipients is done by simply enthering their name and choosing one of the three options available below. Results match based on on full name and email.
Add a new recipient
System & Error Messages
Password Prompt
Avoid complex and non descriptive error messages, if needed, proved with an error number, and refer to documentation online.
Password prompt
Setup needed prompt
Search
By default, client will search on Subject and FROM fields in all folders, except ‘Sent’, where recipients (To, Cc, Bcc) are matched. Results are displayed in reverse chronological order.
Matching words in each field are highlighted.
Note: �1) In Folders view, field will display ‘Search folders’ hint text and display matching folders�2) In Thread view hint text will display ‘Search thread’ and return only matches in that thread.
Default search
Searching
Search results
Expand search
Default search
Searching
No results
At the bottom of the list, a button is displayed to expand the search to the body message.
On tap, client will carry out a new search in the body text, and progressively insert the additional matching results in the list.
Address book (all contacts)
User can switch to the local Address Book from any of the main screens.
Each of the contact entries displays Avatar (if available), Full Name, Email (or #emails if more than 1).
User can
- Quick scroll via the control at the right�- Filter by All, Recent�- Add contacts (see next page)�- Search (by name, email & organisation)
When tapping on ‘Recent’, a view of most recent senders & recipients will be displayed (sorted by time).
View contact
Tapping on a contact will display the View Contact screen.
User can:�a) View Avatar thumbnail, or add a new Avatar via Photo Album or Camera�b) Tap on an email to compose a new message�c) make it a favourite�d) Delete a contact (requires confirmation screen)�e) Edit contact�
Note: When viewing a contact not saved in the address book, d) and e) will be replaced by the icon ‘add contact’�
Edit an Existing, Add a New Contact
Tapping on a contact will display the Edit Contact screen (slide from bottom transitions).
User can:�- Edit contact details�- Edit an existing or add new email
Note: the user must have at least an email, or the confirm button will be disabled.�
When user edits a contact not on the Address book yet, the view will be the same, but it will have a different title.
Global settings
Global settings screen has 4 sections:
1) Account settings. Each account displays either the email, or the number of sender identities
2) Display settings.�- Mark messages read immediately, after [1,2,3] seconds, Never�- Preview: 1,2 or 3 lines
3) Composition settings.�- Include signature on new messages only, all messages, never �4) Link to Privacy and Security setting screen
Account settings and Sender Identities
1) Incoming and Outgoing mail server lead to separate screens.
2) Account description goes to a simple screen with a text field (defaults to focused) where user can change the description
3) Sender identities lead to separate screens
4) Offline settings�- Cache offline for 10, 20, 30, 40 days�5) Mailbox behaviour leads to a separate screen
User can customise the Sender Identity Full name, Reply-to address (by default for the first identity it is the email address) and Signature
Incoming and Outgoing server settings
- Show password checkbox is enabled only when the text field value is cleared.
- Port defaults to the standard account settings. On focus, the value is cleared.
- Advanced IMAP settings leads to a separate screen,
Other settings
Privacy and security
1) User can expose or hide the Dekko Client ID
2) Digital signatures: Select certificate, Add certificate (to be further specified)
3) Encryption: Select certificate, Never encrypt, Always encrypt
Mailbox behaviour
1,2,3) These values should be automatically retrieved on an account basis�4) Permanently delete messages after 10,20,30,40, 50 days
5) Never delete starred/flagged messages.
Other settings (2)
Address book
User can change the way contacts are displayed in the Address Book.
�- First name, last name (default)�- Last name, first name��Sort by�- First name (default)�- Last name�
Questions?
Thank you
Design team
giorgio.venturi@canonical.com
canonical.com
ubuntu.com
Presenter's name