×
Namespaces

Variants
Actions
(Difference between revisions)

Softkey labels

From Nokia Developer Wiki
Jump to: navigation, search
naresh99 (Talk | contribs)
(updated links)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData)
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20070314
 +
|author= [[User:Satu]]
 +
}}
 
[[Category:Usability]]
 
[[Category:Usability]]
  
Line 6: Line 28:
  
 
=== Resources ===
 
=== Resources ===
[http://www.forum.nokia.com/Technology_Topics/Design_and_User_Experience/User_Experience/ Forum Nokia Usability Guide]
+
[http://www.developer.nokia.com/Design/ Nokia Developer Usability Guide]
  
 
[[Usability engineering]]
 
[[Usability engineering]]
Line 20: Line 42:
 
The softkeys and their usage play a big role in the overall user experience, as they are the interface with which the user interacts most often while employing the services of the product. When designing S60 applications, it's important to follow the S60 UI style.
 
The softkeys and their usage play a big role in the overall user experience, as they are the interface with which the user interacts most often while employing the services of the product. When designing S60 applications, it's important to follow the S60 UI style.
  
For more on the S60 style guide [http://www.forum.nokia.com/info/sw.nokia.com/id/04c58d5a-84c3-42db-83d5-486c1cf3e6b3/S60_UI_Style_Guide_v1_3_en.pdf.html refer] , for an indicative J2ME style guide, check this [http://books.slashdot.org/article.pl?sid=03/09/01/1324233 link].
+
For more on the S60 style guide [http://www.developer.nokia.com/info/sw.nokia.com/id/04c58d5a-84c3-42db-83d5-486c1cf3e6b3/S60_UI_Style_Guide_v1_3_en.pdf.html refer] , for an indicative J2ME style guide, check this [http://developers.slashdot.org/story/03/09/01/1324233/MIDP-20-Style-Guide-for-J2ME link].
  
 
==Importance of following style guidelines==
 
==Importance of following style guidelines==
Line 44: Line 66:
 
     <td align="left">
 
     <td align="left">
 
'''Example of wrong softkey placement'''<br>                     
 
'''Example of wrong softkey placement'''<br>                     
[[Image:Wrong placement.JPG]]
+
[[File:No conventions.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
''' Example of wrong softkey placement '''<br>                     
+
''' Example of right softkey placement '''<br>                     
[[Image:Right placement.JPG]]
+
[[File:Right command.jpg]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 59: Line 81:
 
     <td align="left">
 
     <td align="left">
 
'''Example of options & exit softkey placement'''<br>                     
 
'''Example of options & exit softkey placement'''<br>                     
[[Image:Option exit placement.JPG]]
+
[[File:Screenshot00912.jpg]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 79: Line 101:
 
<tr>
 
<tr>
 
     <td align="left">
 
     <td align="left">
'''Example of command not hidden as per application state<br>                  
+
'''Option menu with command not hidden as per context'''<br>
[[Image:Command not hidden.JPG]]
+
[[File:Item not dimmed.jpg]]
 +
  </td>
 +
<td align="left">
 +
[[File:Wrong error.jpg]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 89: Line 114:
 
     <td align="left">
 
     <td align="left">
 
'''Example of wrong command grouping <br>                     
 
'''Example of wrong command grouping <br>                     
[[Image:Wrong command grouping.JPG]]
+
[[File:Wrong group.jpg]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
''' Example of right command grouping '''<br>                     
 
''' Example of right command grouping '''<br>                     
[[Image:Right command grouping.JPG]]
+
[[File:Option grouped.jpg]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 106: Line 131:
 
     <td align="left">
 
     <td align="left">
 
'''Example of truncating prompt text <br>                     
 
'''Example of truncating prompt text <br>                     
[[Image:Truncating softkey text.JPG]]
+
[[File:Truncating.jpg]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 116: Line 141:
 
   <td align="left">
 
   <td align="left">
 
''' Example of wrong prompt text '''<br>                     
 
''' Example of wrong prompt text '''<br>                     
[[Image:Wrong terminology.JPG]]
+
[[File:Wrong text.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
''' Example of wrong commands being used '''<br>                     
 
''' Example of wrong commands being used '''<br>                     
[[Image:Wrong commands.JPG]]
+
[[File:Wrong command.JPG]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 134: Line 159:
  
 
"Exit" can be placed to the right softkey when there is no need for other labels and it's expected that user might want to close the application.  
 
"Exit" can be placed to the right softkey when there is no need for other labels and it's expected that user might want to close the application.  
 +
 +
=== Softkeys on idle screen ===
 +
In the idle screen, the softkeys can be used as shortcuts to specific applications. This can be configured by the users and the softkeys will change according to that.
 +
 +
=== Softkeys and Selection ===
 +
* In case both the softkeys are available, the select functionality must be linked to the left softkey.
 +
* In case only the left softkey is available, the select functionality must be linked to the left softkey and the right softkey must be disabled.
 +
* In case only the right softkey is available, the select functionality must be linked to the right softkey and the left softkey must be disabled.
  
 
==Querying softkey positioning==
 
==Querying softkey positioning==
Line 162: Line 195:
 
   }
 
   }
 
</code>
 
</code>
 
<b>---- Edited by Mayank on 18/06/2009 ----</b>
 
  
  
 
== Related Links ==
 
== Related Links ==
  
* [http://wiki.forum.nokia.com/index.php/How_to_find_out_the_correct_location_for_softkey_labels How to find out the correct location for softkey labels]
+
* [[How to find out the correct location for softkey labels]]
  
* [http://wiki.forum.nokia.com/index.php/TSS000880_-_Setting_an_image_for_a_softkey Setting an image for a softkey]
+
* [[Archived:Setting an image for a softkey using Symbian C++]]
 +
 
 +
 
 +
<b>---- Edited by Mayank on 18/06/2009 ----</b>

Latest revision as of 13:52, 31 July 2012

Article Metadata
Article
Created: Satu (14 Mar 2007)
Last edited: hamishwillee (31 Jul 2012)

Contents

[edit] Importance of usability

The importance of usability and its impact on the overall product’s acceptability has been discussed in great lengths at the following resouces :-

[edit] Resources

Nokia Developer Usability Guide

Usability engineering

Why Usability

General usability issues

Designing usability

[edit] Introduction

As can be understood from the resources detailed above, usability is today one of the most important if not the deciding factor in determining the succes/failure of a given solution. As markets becomes saturated with niche products and other offerings which are feature/functionality rich, usability would probably be the single most unique selling point for any application.

The softkeys and their usage play a big role in the overall user experience, as they are the interface with which the user interacts most often while employing the services of the product. When designing S60 applications, it's important to follow the S60 UI style.

For more on the S60 style guide refer , for an indicative J2ME style guide, check this link.

[edit] Importance of following style guidelines

Shock and surprise are two evils which should be done away with as much as possible while designing any application, and this applies all the more in the case of mobile applications. A typical mobile application user is very demanding of the interface and features of the application, they also want to be able to use the features in the way they percieve it to work. So if you do/show anything that does not follow the expectations or conventions it is bound to confuse/frustrate the user.

Users always find find it easier to learn how to use your application, if the look and feel is similar to other system applications. The style guide lays down the patterns for all applications and if you adhere to it, you ensure that the softkey terminology and placings are in line with the other applications on the device. The average user would be comfortable using the built in applications like contacts, messaging etc and they would be familiar with the softkey patterns of those applications, so if you follow those conventions even in your application they wouldn’t be in for a rude shock.

[edit] Common softkey guidelines

[edit] Placement of softkeys

When it comes to the placement of the softkeys, in S60 devices the softkey labels placed on the

*left softkey: Should have a positive actions like OK, Select, Options

*right softkey: Should have a negative actions like Back, Cancel, Quit, Exit

*center softkey Should be select/Done, even though it can be considered as a positive action.

Example of wrong softkey placement
No conventions.JPG

Example of right softkey placement
Right command.jpg

In case the application has options menu available then the left softkey should have "Options", as the text, on click of that the options menu should open up.

Example of options & exit softkey placement
Screenshot00912.jpg

[edit] Layout of options menu

It should be easy for the user to see/use the common features of the application and also to be able to close the application easily. Some common guidelines to take care of these expecatations would be as under :-

  1. The Options menu of the application’s main view should always have "Exit" as the last item in the menu, as an exit in the middle of the menu would be confusing for the user and if pressed by mistake it would end up closing the application even though that may not have been the idea.
  2. Most commonly used features should always be on the main menu.
  3. Menu options should be logically grouped in case of a multi view application, and should make sense in context of the view.
  4. Hide unwanted menu options instead of showing them only to ignore the menu press in those cases.
  5. Provide user the option to go back to the main view from the other views using the softkeys in case of multi-view application.
  6. In case of dialogs/settings list/popups etc give the user the choice to cancel/go back to the main view/page. The placement should again adhere to the style guidelines.
  7. Use cascaded menu in case of choices for a basic operatation on the main menu like sorting, selection mode etc.

Option menu with command not hidden as per context
Item not dimmed.jpg

Wrong error.jpg

Example of wrong command grouping
Wrong group.jpg

Example of right command grouping
Option grouped.jpg

[edit] Text on the softkeys

Ensure that you use meaningful prompt text on the softkeys, in case of commonly used mobile terms, use them instead of coining your own fancy terms. Also ensure that you don’t use too long texts which are either truncated or ending with ellipsis on the softkeys. The text should be simple and easy to understand, use of technical or complicated messages are a no go.

Example of truncating prompt text
Truncating.jpg


Example of wrong prompt text
Wrong text.JPG

Example of wrong commands being used
Wrong command.JPG

[edit] Use of icons

In case you plan to put icons on the softkeys ensure that those icons logically relate to the prompt text, for instance if the text is Call don’t place a messaging icon or so on.

[edit] Stick to conventions

In S60 3rd Edition devices, pressing the End key (Red key) closes the application automatically and is also a Symbian Signing requirement. Unless and until you have a valid case not to close the application on the press of the red key, don’t over ride it.

"Exit" can be placed to the right softkey when there is no need for other labels and it's expected that user might want to close the application.

[edit] Softkeys on idle screen

In the idle screen, the softkeys can be used as shortcuts to specific applications. This can be configured by the users and the softkeys will change according to that.

[edit] Softkeys and Selection

  • In case both the softkeys are available, the select functionality must be linked to the left softkey.
  • In case only the left softkey is available, the select functionality must be linked to the left softkey and the right softkey must be disabled.
  • In case only the right softkey is available, the select functionality must be linked to the right softkey and the left softkey must be disabled.

[edit] Querying softkey positioning

With Nokia E90 one should notice that on the PDA side softkeys are reversed compared to other S60 devices. The same happens on Nokia N93(i) when using landscape mode, too. You can use the following code to find out which softkey is the upper one when the CBA is on the left or right side of the screen. The example code assumes that CBA has Options (EAknSoftkeyOptions) and Exit (EAknSoftkeyExit) commands, otherwise it doesn't work.

TBool IsOptionsButtonOnTop()
{
CEikButtonGroupContainer* cba = CEikonEnv::Static()->AppUiFactory()->Cba();
if( !cba )
{
return EFalse;
}
 
CCoeControl* options = cba->ControlOrNull( EAknSoftkeyOptions );
CCoeControl* exit = cba->ControlOrNull( EAknSoftkeyExit );
 
if( options && exit )
{
if( options->Position().iY < exit->Position().iY )
{
return ETrue;
}
}
 
return EFalse;
}


[edit] Related Links


---- Edited by Mayank on 18/06/2009 ----

This page was last modified on 31 July 2012, at 13:52.
140 page views in the last 30 days.
×