Highlight actionable Þelds Contact edit page redesign · The contact edit page slides in with...
14
FirefoxOS 2014/7/16 Last Modified: Highlight actionable fields Contact edit page redesign Version 0.1 [July 16, 2014] 1 Most recent spec available at - [link to folder in mozilla.box.com] [insert bug # and title] Questions? Email the author or
Transcript of Highlight actionable Þelds Contact edit page redesign · The contact edit page slides in with...
FirefoxOS 2014/7/16Last Modified:
Highlight actionable fields Contact edit page redesign
Version 0.1 [July 16, 2014]
1
Most recent spec available at - [link to folder in mozilla.box.com] [insert bug # and title] Questions? Email the author or
FirefoxOS 2014/7/16Last Modified:
Version history
2
V0.1 draft [07/16/2014] [Carrie Wang] Rearrange and highlight the actionable fields in Contact edit page.
FirefoxOS 2014/7/16Last Modified:
User stories / referencesBug 1026690 https://bugzilla.mozilla.org/show_bug.cgi?id=1026690
3
FirefoxOS 2014/7/16Last Modified:
View details
4
FirefoxOS 2014/7/16Last Modified:5
Different views of contact edit page V0.1
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Date
Comment
Name
Last name
Company
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Name
Last name
Company
Default Contacts edit view (screen size view)
Default Contacts edit view (full page)
Add a section on each info type (full page)
We provide Picture, First/Last names, Company and Phone sections as default fields so that users can input them directly. !They can also add other Phone, Email, Address, Date and Comment sections for more information.
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Comment
Name
Last name
Company
Street
Address
City State
Country ZIP
Date
Date
Birthday Date
Personal
FirefoxOS 2014/7/16Last Modified:
Key flow
6
FirefoxOS 2014/7/16Last Modified:7
Input fields
1. Add a new contact11:21 pm11:21 pm
A
Contacts
Adam Patsoule
Search
Alice Chiu
Alison Hennessy
Amanda Kontaris
B
Bella Slade
Betty DayImported 1 contacts
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Name
Last name
Company
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Name
Last name
Company
|
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Last name
Company
|Jo
11:21 pm
Add contact Done
Mobile Carrier
Phone
Add picture
Phone
Phone
Address
Last name
Company
|
John
User taps the “+” button to create a new contact.
2. Input first name 3. Typing 4. Keep typing 5. Input last name
The contact edit page slides in with default fields which are Photo, First name, Last name, Company fields and Phone input section. !User taps the First name field.
The cursor is positioned in the First name field and the “x” button on the right of the field appears and the keyboard slides in. User starts typing.
User keeps typing. User taps the Last name field and starts typing as the same flow for First name.
V0.1
FirefoxOS 2014/7/16Last Modified:8
Add / Delete a section
11:21 pm
Add contact Done
Mobile
Add picture
Phone
John
Doe
Mozilla
0931888888
Mobile Carrier
Phone
Phone
FarEastern
11:21 pm
Add contact Done
Mobile
Add picture
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
11:21 pm
Add contact Done
Add picture
John
Doe
Mozilla
Phone
Address
Date
Comment
1. Add another Phone section
User taps the “+Phone” button to create a new phone number.
2. Delete the new Phone section
A new Phone section is created with the same input fields as the default one, which are Type, Carrier and Phone fields. !There is still a “+Phone” underneath the new added Phone section. !User taps the “X” button in the Phone section to delete the whole section.
11:21 pm
Add contact Done
Mobile
Add picture
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
3. Delete the first Phone section 4. All deleted
The new created Phone section is deleted and disappears. !There is still a “+Phone” underneath the Phone section. !User taps the “X” button in the Phone section to delete the whole section.
The who section is deleted (includes the input texts), but the “+Phone” will still be there so that user can always create a new Phone section. !The same rule can be applied to other sections. The “+” button of the each info type will always exist even after user has deleted or created a section. !!
V0.1
FirefoxOS 2014/7/16Last Modified:9
Relocate the position of current input field
11:21 pm
Add contact Done
Mobile
Add picture
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
11:21 pm
0931888888Add contact Done
Phone
1. Add a new section
User taps the “+Email” to create an Email section.
11:21 pm
Add picture
John
Doe
Mozilla
Mobile
Phone
0931888888
FarEastern
Add contact Done
Phone
Personal
Personal
Email|
2. Locate the cursor3. Relocate the position of the input field
The area is extended and the user taps the input field to locate the cursor.
The keyboard slides in and the input field will be pushed up to above the keyboard so that user can see the input texts while typing.
Note:
The main flow of the function on Contact edit will not change (e.g. selecting from value selector or input texts etc). !The spec only defines the interaction which may change due to the layout changes. !
V0.1
FirefoxOS 2014/7/16Last Modified:10
Transition of adding a new section
Phone
Mobile Carrier
Phone
Phone
Phone
User taps the “+” bar to create a new section.
The “+” will rotate to “x” as a delete button so that user can delete the whole section. Meanwhile, the bar will extend downwards to increase the space for input fields.
The input fields and the selector of this info type will appear then. !In addition, there will be another “+Phone” action button appear underneath this newly added section.
Phone
Note:
The “+” will rotate 45 to “x”.
V0.1
FirefoxOS 2014/7/16Last Modified:11
Photo section
11:21 pm
Add contact Done
Mobile
Add picture
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
11:21 pm
Add contact Done
Mobile
Add picture
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
Select from
Cancel
Gallery
Camera
Delete the photo
11:21 pm
Add contact Done
Mobile
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
Edit
1. Add a photo to the contact
User taps the “+” in the photo area to set a photo for the contact.
2. Options in the action menu (Add picture) 3. Choose a photo
User taps Gallery or Camera to access the APP for photo selection. !Tap Cancel to go back to Screen 1.
11:21 pm
Add contact Done
Mobile
Add picture
Phone
Phone
Address
John
Doe
Mozilla
0931888888
FarEastern
Select from
Cancel
Gallery
Camera
Gallery/ Camera APPs
4. Photo added
User chooses/takes photo in Gallery/ Camera APPs and finishes photo edit.
A photo has been set as the contact photo. User taps the edit button on the photo to reselect one or remove it.
5. Options in the action menu (Edit picture)
The action menu pops up. It has a delete option for user to delete the contact photo they set before. They can also tap Gallery or Camera to choose/take a new photo to replace the current one. !Tap Cancel to go back to Screen 4.
V0.1
FirefoxOS 2014/7/16Last Modified:
Visual design proposal
12
FirefoxOS 2014/7/16Last Modified:13
Mockup 1 Mockup 2
V0.1
FirefoxOS 2014/7/16Last Modified:
Thanks!
14
from your friends at Mozilla UX!
