Webinar Series 40 UI Design
(Krebbix -) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Bot update - Fix ArticleMetaData) |
||
| Line 10: | Line 10: | ||
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | ||
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | ||
| − | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | + | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> |
| − | |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | + | |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> |
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase --> | |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase --> | ||
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
|translated-by= <!-- [[User:XXXX]] --> | |translated-by= <!-- [[User:XXXX]] --> | ||
| − | |translated-from-title= <!-- Title only --> | + | |translated-from-title= <!-- Title only --> |
|translated-from-id= <!-- Id of translated revision --> | |translated-from-id= <!-- Id of translated revision --> | ||
| − | |review-by=<!-- After re-review: [[User:username]] --> | + | |review-by= <!-- After re-review: [[User:username]] --> |
|review-timestamp= <!-- After re-review: YYYYMMDD --> | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
|update-by= <!-- After significant update: [[User:username]]--> | |update-by= <!-- After significant update: [[User:username]]--> | ||
|update-timestamp= <!-- After significant update: YYYYMMDD --> | |update-timestamp= <!-- After significant update: YYYYMMDD --> | ||
| − | |creationdate= | + | |creationdate= 20120629 |
| − | |author= | + | |author= [[User:Krebbix]] |
}} | }} | ||
| Line 31: | Line 31: | ||
====How would this screen look in Series 40 Full Touch?==== | ====How would this screen look in Series 40 Full Touch?==== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 01.png|200px]] |
=====Proposal:===== | =====Proposal:===== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 02.png|200px]] |
The Touch & Type canvas can be transferred into a canvas again. The content layout stays unchanged and Back and Options are replaced automatically with icons. However, the primary function “Add” in the middle soft key (Touch & Type) is replaced with a new icon “plus” (Full Touch). In Full Touch there is more content “above the fold” than in Touch & Type. | The Touch & Type canvas can be transferred into a canvas again. The content layout stays unchanged and Back and Options are replaced automatically with icons. However, the primary function “Add” in the middle soft key (Touch & Type) is replaced with a new icon “plus” (Full Touch). In Full Touch there is more content “above the fold” than in Touch & Type. | ||
| Line 47: | Line 47: | ||
=====Proposal 1:===== | =====Proposal 1:===== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 03.png|200px]] |
The environment is a Form screen. Username and password are filled via TextField and the Setting for auto-fill is done via a pop-up choice group. This proposal places Help and Forgot password under the Options menu. The login is done via the checkmark in Action Button #1 | The environment is a Form screen. Username and password are filled via TextField and the Setting for auto-fill is done via a pop-up choice group. This proposal places Help and Forgot password under the Options menu. The login is done via the checkmark in Action Button #1 | ||
=====Proposal 2:===== | =====Proposal 2:===== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 04.png|200px]] |
The environment is again a Form screen with 2 TextFields and 1 pop-up choice group. In addition, there is a StringItem formatted as a Button and a StringItem formatted as a hyperlink. There is no action in Action Button #1. | The environment is again a Form screen with 2 TextFields and 1 pop-up choice group. In addition, there is a StringItem formatted as a Button and a StringItem formatted as a hyperlink. There is no action in Action Button #1. | ||
| Line 68: | Line 68: | ||
=====Proposal:===== | =====Proposal:===== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 05.png|200px]] |
The pop-up choice group in a Form screen offers single selection out of a list. Also the exclusive choice group would have been a good choice. It depends on the environment. Usually collapsing UI elements are preferred if there are many different settings slots in a single view, whereas static UI components are usually preferred in case only few settings slots are available. | The pop-up choice group in a Form screen offers single selection out of a list. Also the exclusive choice group would have been a good choice. It depends on the environment. Usually collapsing UI elements are preferred if there are many different settings slots in a single view, whereas static UI components are usually preferred in case only few settings slots are available. | ||
| Line 78: | Line 78: | ||
You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI. | You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI. | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 06.png|200px]] |
=====Proposal:===== | =====Proposal:===== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 07.png|200px]] |
The proposal is similar to the previous problem, except that the pop-up choice group contains only 2 items. | The proposal is similar to the previous problem, except that the pop-up choice group contains only 2 items. | ||
| Line 93: | Line 93: | ||
=====Proposal:===== | =====Proposal:===== | ||
| − | [[File: | + | [[File:Webinar Series40 UI Design 08.png|200px]] [[File:Webinar Series40 UI Design 09.png|200px]] [[File:Webinar Series40 UI Design 10.png|200px]] [[File:Webinar Series40 UI Design 11.png|200px]] [[File:Webinar Series40 UI Design 12.png|200px]] |
* Alerts can have 0 – 3 buttons. Position and layout are predefined. | * Alerts can have 0 – 3 buttons. Position and layout are predefined. | ||
Revision as of 04:08, 2 July 2012
This article is companion for the Series 40 UI design webinars. It contains solutions and proposals for the webinar exercises and discusses open issues which could not be solved during the webinar Q/A session.
Article Metadata
Contents
|
Webinar Series 40 Full Touch UI Style Guide, part 1, 28.06.2012 and 04.07.2012
Problems
How would this screen look in Series 40 Full Touch?
Proposal:
The Touch & Type canvas can be transferred into a canvas again. The content layout stays unchanged and Back and Options are replaced automatically with icons. However, the primary function “Add” in the middle soft key (Touch & Type) is replaced with a new icon “plus” (Full Touch). In Full Touch there is more content “above the fold” than in Touch & Type.
Create a sign-in view.
It should contain:
- Username
- Password
- Setting for auto-fill password
- Forgot password & help
Proposal 1:
The environment is a Form screen. Username and password are filled via TextField and the Setting for auto-fill is done via a pop-up choice group. This proposal places Help and Forgot password under the Options menu. The login is done via the checkmark in Action Button #1
Proposal 2:
The environment is again a Form screen with 2 TextFields and 1 pop-up choice group. In addition, there is a StringItem formatted as a Button and a StringItem formatted as a hyperlink. There is no action in Action Button #1.
Discussion:
The second proposal has everything available in the view, but it is not likely that it will work flawlessly with Touch & Type devices. However, since the additional elements in the view (Login button and Help hyperlink) are more prominent, it is expected to reduce interaction bumpers if the design is optimized for Full Touch.
Which component would you use to pick one of the following?
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
Proposal:
The pop-up choice group in a Form screen offers single selection out of a list. Also the exclusive choice group would have been a good choice. It depends on the environment. Usually collapsing UI elements are preferred if there are many different settings slots in a single view, whereas static UI components are usually preferred in case only few settings slots are available.
Please note, the LCDUI Tumbler (DateField) is not suitable for this task. It only can pick time and date, but no weekdays or any other values.
How would you replace a single choice item (aka switch)?
You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI.
Proposal:
The proposal is similar to the previous problem, except that the pop-up choice group contains only 2 items. Another solution would be a multi selection choice group with only one item. Also an exclusive selection choice group with 2 items is possible to replace a switch. The choice depends in the end again from the environment:
- pop-up choice group; best if used in a busy layout
- multi selection choice group (1 item), if there is a clear on/off metaphor (e.g. radio on/off)
- exclusive choice group if indicating the correct state is crucial, and on/off is not necessarily the right metaphor (e.g. dim light on/off vs. dimmed light – full light)
Which views can have a button? Are there any limitations?
Proposal:
- Alerts can have 0 – 3 buttons. Position and layout are predefined.
- StringItem in a Form screen can be dressed as a button or as a labeled button. It is only possible to show one button per row.
- The CustomItem in Form screen can host a button or a button group.
- The full screen canvas can contain buttons. The 4th image shows custom surround-shaped push-buttons with icons and with additional text below the push button. If the button is based on icons it is many times beneficial to add text explaining the action being mapped to the button.
- A canvas with a custom toolbar, as shown in the 5th image. Do not place more than 5 items in a toolbar.
Open issues from Q/A
What happens with the keypad if BT keyboard is detected?
Ongoing.
Can text be formatted, e.g. rich text formatting?
Ongoing
How is the image in an ImageItem in landscape orientation being cropped?
Ongoing.
