org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Designing widgets"/><meta name="abstract" content="Before starting widget development, analyze and define the requirements, scope, and functionality of the widget to ensure efficient functionality and a smooth user experience. Design the widget for a single purpose and analyze how it can best serve its users. Mobile devices have been designed for use when mobile. Keep the characteristics of mobile devices in mind when you create widgets for them."/><meta name="description" content="Before starting widget development, analyze and define the requirements, scope, and functionality of the widget to ensure efficient functionality and a smooth user experience. Design the widget for a single purpose and analyze how it can best serve its users. Mobile devices have been designed for use when mobile. Keep the characteristics of mobile devices in mind when you create widgets for them."/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Relation" scheme="URI" content="GUID-91B65EA3-06B7-475E-9557-29EE584731E5"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Language" content="en"/><title>Designing widgets </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D">Designing widgets</h1><div><p>Before starting widget development, analyze and define the requirements, scope, and functionality of the widget to ensure efficient functionality and a smooth user experience. Design the widget for a single purpose and analyze how it can best serve its users. Mobile devices have been designed for use when mobile. Keep the characteristics of mobile devices in mind when you create widgets for them.</p>
<div><h3>Top 10 usability guidelines for widgets</h3><p>The following guidelines are discussed in more detail in the topics in this section. They help you design and develop usable widgets for S60 devices with varying characteristics, such as screen size and support for input methods:</p><ol>
<li id="GUID-D49D964C-3F3D-4A55-8261-E72C3C9FAFC9"><a name="GUID-D49D964C-3F3D-4A55-8261-E72C3C9FAFC9"><!----></a><p><a href="GUID-B2976236-0DC6-4CBB-B2FA-B1A6E6639A1D.html#GUID-B2976236-0DC6-4CBB-B2FA-B1A6E6639A1D">Know your users</a>—Find out who will use the widget, what they will use it for, and which mobile devices they have. Then design the widget to fit a specific context of use.</p></li>
<li id="GUID-116912CE-7EB2-463A-BB90-888B3E6109F0"><a name="GUID-116912CE-7EB2-463A-BB90-888B3E6109F0"><!----></a><p><a href="GUID-B74565A3-C981-4377-99F0-FAD87B9E516D.html#GUID-B74565A3-C981-4377-99F0-FAD87B9E516D">Design for small screens</a>—The screen size of mobile devices is significantly smaller than that available on desktop devices. Carefully consider what is the most relevant content to present on the widget UI, as it might not be reasonable to try and fit as much content into the screen as you might have on a Web page.</p></li>
<li id="GUID-B0C5D558-D28D-47F0-8037-5BFD5659FB02"><a name="GUID-B0C5D558-D28D-47F0-8037-5BFD5659FB02"><!----></a><p><a href="GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html#GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69">Design for multiple screen sizes</a>—Relate the position and size of each control to the dimensions of the display. This enables the same set of information to be presented on the screen in all resolutions; higher resolution devices just display finer graphics.</p></li>
<li id="GUID-587EEAF5-B10A-4491-A3D4-6196ACCFCD7D"><a name="GUID-587EEAF5-B10A-4491-A3D4-6196ACCFCD7D"><!----></a><p><a href="GUID-36CDDA1B-3B62-4936-9E06-7935AAD1CD77.html#GUID-36CDDA1B-3B62-4936-9E06-7935AAD1CD77">Design for changing screen orientation</a>—Some S60 devices support screen rotation. On these devices, applications can be displayed in portrait or landscape orientation. Account for orientation and dynamically adjust the display when the screen is rotated.</p></li>
<li id="GUID-40E60228-AE21-40BE-B0AB-B1FBD9C8B62A"><a name="GUID-40E60228-AE21-40BE-B0AB-B1FBD9C8B62A"><!----></a><p><a href="GUID-C359CC7E-B8BA-491B-A0C4-0FF1D3C4110C.html#GUID-C359CC7E-B8BA-491B-A0C4-0FF1D3C4110C">Design intuitive ways of moving within widgets</a>—Mobile devices lack a mouse and full-size keyboard, so users must use the five way navigation pad to move within widgets. In addition, many users control the devices with one hand. To create an optimized web experience, allow users to access information with one click; do not make them scroll and type.</p></li>
<li id="GUID-112CF90F-2CF2-4C64-95A0-9EE5F665168A"><a name="GUID-112CF90F-2CF2-4C64-95A0-9EE5F665168A"><!----></a><p><a href="GUID-6DD2B3D2-BA3B-4936-BBC9-F61B6757B6F8.html#GUID-6DD2B3D2-BA3B-4936-BBC9-F61B6757B6F8">Design for limited input methods</a>—To create widgets that fetch meaningful content from Web sites, you need to collect information from users on the task at hand. S60 devices rely on physical keys such as a five way navigation pad, a keypad, keyboard, and set of labeled soft keys for user input. In addition, some S60 devices support stylus and finger touch screen input. Users enter information by using screen controls, such as lists, check boxes, radio buttons, and text fields.</p></li>
<li id="GUID-CB5C253A-9C3C-4D7A-BB5E-7328BB0D1A68"><a name="GUID-CB5C253A-9C3C-4D7A-BB5E-7328BB0D1A68"><!----></a><p><a href="GUID-A60E9080-A08C-4701-A45E-0D0BAE33C88F.html#GUID-A60E9080-A08C-4701-A45E-0D0BAE33C88F">Keep response times short</a>—Latency can cause delays in user interaction. If users perceive a widget as being slow, they are likely to get frustrated and stop using it.</p></li>
<li id="GUID-75E527F0-E467-4156-A5E9-9DE461428DAF"><a name="GUID-75E527F0-E467-4156-A5E9-9DE461428DAF"><!----></a><p><a href="GUID-159FCC18-2C9D-49F0-BAC1-DFEAADCF1D89.html#GUID-159FCC18-2C9D-49F0-BAC1-DFEAADCF1D89">Save battery time</a>—Mobile devices are not constantly connected to a power source but run on battery power. Optimize power consumption to keep the total consumption at an acceptable level and to prevent users from running out of battery time.</p></li>
<li id="GUID-369826BA-0949-4EB1-AB24-1637E80C7B93"><a name="GUID-369826BA-0949-4EB1-AB24-1637E80C7B93"><!----></a><p><a href="GUID-C158B834-9FF8-47C1-B2B5-BA154EBFA8BC.html#GUID-C158B834-9FF8-47C1-B2B5-BA154EBFA8BC">Consider network issues</a> —If users do not have a flat-rate data plan or WLAN support, mobile network connections cost them money. Also, when users move around with the devices, the networks available for connections constantly change.</p></li>
<li id="GUID-039825F5-4B89-479F-9B2F-6D9BD5AF78B7"><a name="GUID-039825F5-4B89-479F-9B2F-6D9BD5AF78B7"><!----></a><p><a href="GUID-AFAF423C-2193-440D-A2D3-80549FFF0A46-1AFC49140A2B.html#GUID-AFAF423C-2193-440D-A2D3-80549FFF0A46-1AFC49140A2B">Remember the processing limits of the device</a>—The memory available on devices is limited and you should use it carefully. Although all S60 devices have common functionality, each device is individual in terms of both the resources available and extra features. Therefore, you must consider the constraints of all the target devices.</p></li>
</ol><p>For more information about the characteristics of mobile devices, see <a href="http://www.forum.nokia.com/devices" target="_blank">Device Specifications</a>.</p><p>For more information about user experience techniques for S60 devices, see the <a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html" target="_blank">Design and User Experience Library</a>. </p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>