×
Namespaces

Variants
Actions
(Difference between revisions)

Text Usability

From Nokia Developer Wiki
Jump to: navigation, search
naresh99 (Talk | contribs)
(points added)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]][[Category:Usability]]
+
{{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= 20090627
 +
|author= [[User:Naresh99]]
 +
}}
 +
[[Category:Usability]]
  
 
==Descriptions==
 
==Descriptions==
Line 19: Line 41:
 
     <td align="left">
 
     <td align="left">
 
'''Left aligned text looks good. '''<br>
 
'''Left aligned text looks good. '''<br>
[[Image:Lalign.JPG]]
+
[[File:Lalign.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Right aligned text looks bad. '''<br>
 
'''Right aligned text looks bad. '''<br>
[[Image:Ralign.JPG]]  
+
[[File:Ralign.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 36: Line 58:
 
     <td align="left">
 
     <td align="left">
 
'''Black text on a white background is more readable. '''<br>
 
'''Black text on a white background is more readable. '''<br>
[[Image:ColorCombination.JPG]]
+
[[File:ColorCombination.JPG]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 49: Line 71:
 
     <td align="left">
 
     <td align="left">
 
'''Text paragraph wit bold title looks good '''<br>
 
'''Text paragraph wit bold title looks good '''<br>
[[Image:BoldTitle.JPG]]
+
[[File:BoldTitle.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
''Text paragraph with normal title is look bad'''<br>
 
''Text paragraph with normal title is look bad'''<br>
[[Image:NormalTitle.JPG]]  
+
[[File:NormalTitle.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 67: Line 89:
 
     <td align="left">
 
     <td align="left">
 
'''Text paragraph with truncated text and appended dots'''<br>
 
'''Text paragraph with truncated text and appended dots'''<br>
[[Image:Without marquee 1.jpg]]
+
[[File:Without marquee 1.jpg]]
 
   </td>
 
   </td>
 
<td align="left">
 
<td align="left">
[[Image:Without marquee 2.jpg]]
+
[[File:Without marquee 2.jpg]]
 
   </td>   
 
   </td>   
 
</tr>
 
</tr>
Line 83: Line 105:
 
     <td align="left">
 
     <td align="left">
 
'''Text paragraph with word wrapping looks good '''<br>
 
'''Text paragraph with word wrapping looks good '''<br>
[[Image:Wrapping.JPG]]
+
[[File:Wrapping.JPG]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
''Text paragraph without word wrapping looks bad'''<br>
 
''Text paragraph without word wrapping looks bad'''<br>
[[Image:NoWrapping.JPG]]  
+
[[File:NoWrapping.JPG]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 102: Line 124:
 
     <td align="left">
 
     <td align="left">
 
'''Text paragraph with marquee effects'''<br>
 
'''Text paragraph with marquee effects'''<br>
[[Image:Marquee enabled.jpg]]  
+
[[File:Marquee enabled.jpg]]  
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 111: Line 133:
 
* Do not use ALL CAPS text.
 
* Do not use ALL CAPS text.
 
* Employ the user's native language. Always test localized versions of the application with native users.
 
* Employ the user's native language. Always test localized versions of the application with native users.
 +
 +
==Related Links==
 +
* [[Text wrapping in Java ME]]

Latest revision as of 03:42, 9 May 2012

Article Metadata
Article
Created: naresh99 (27 Jun 2009)
Last edited: hamishwillee (09 May 2012)

[edit] Descriptions

Text usability is applying usability principles to content to improve the impact the text has on the reader. It includes making your text easier to read. When text is easier to read, the user is able to absorb the information you provide to them. This is important for any application. Easier to read text also builds the relationship between you and your user. If you convey information to them in a way they understand, they'll be more likely to trust you and any products or services you might offer.

Text usability is about building trust through your text. It's about making your users more comfortable with your application and forging a closer relationship to them. Your content has a monumental impact on your user, and every word should be used to your advantage. By applying usability to your text, your content will be easier to understand and users will talk about your application.

[edit] Some usability guideline for text are

  • Organize the text into paragraphs.
  • Try to use bulleted information instead of a table.
  • Set the default text alignment is left. For right-to-left UI languages, the default text alignment is on the right.


Left aligned text looks good.
Lalign.JPG

Right aligned text looks bad.
Ralign.JPG


  • The best combination for readability of text is black text on a white background. so black text is preferable.


Black text on a white background is more readable.
ColorCombination.JPG


  • Highlight keywords or title of text.


Text paragraph wit bold title looks good
BoldTitle.JPG

Text paragraph with normal title is look bad'
NormalTitle.JPG


  • Truncate text if it is not fit in line and not supposed to display in two line. Add three dots(...) if truncation is required.

The text should be truncated from the end. An exception to this is phone number, which should be truncated from the begining.


Text paragraph with truncated text and appended dots
Without marquee 1.jpg

Without marquee 2.jpg


  • Do not truncate text of softkey labels and menus.
  • Use word wrapping whenever for displaying long texts in paragraph.


Text paragraph with word wrapping looks good
Wrapping.JPG

Text paragraph without word wrapping looks bad'
NoWrapping.JPG


  • Use the same text as the control condition in a layout that facilitated scanning text easily.
  • Add marquee scrolling if text does not fit to a list view and supposed to show a whole text. Scrolling is done only when the item is highlighted and the text is scrolled in only one direction.


Text paragraph with marquee effects
Marquee enabled.jpg


  • Avoid abbreviation of text if they are not familiar to all target users.
  • Do not use ALL CAPS text.
  • Employ the user's native language. Always test localized versions of the application with native users.

[edit] Related Links

This page was last modified on 9 May 2012, at 03:42.
126 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×