From Forum Nokia Wiki

You do not have permission to edit this page, for the following reason:

You can view and copy the source of this page:

{{ReviewerApproved}} {{FeaturedArticle}} [[Category:Web Runtime (WRT)]][[Category:Usability]][[Category:Mobile_Design]] This article describes the '''design and development process taken to mobilize the Forum Nokia Community website'''. ==Step 1. Choosing sections== The '''Forum Nokia website''' offers many sections and sub-sections, with '''rich information covering all the aspects of mobile development'''. All this information is highly valuable in a standard website, since it allows users to easily find answers to all mobile-related questions and doubts. However, a '''mobile device represents a different environment''', where users want to '''access information in a different way, and for different purposes''': * users want to '''quickly reach information''', with very few interactions * they want to '''easily read information''', without the need to identify relevant content in a overly-populated interface * also, not all content is suited for mobile users and devices, since too-rich or '''complex information''' is: ** '''not easily representable on small displays''' ** '''not of interest for users in mobility''' For this reasons, the following sections are chosen for the mobile version of the Forum Nokia Community: * the '''Discussion Boards''': the discussion boards contains quite only textual data, and so are easily adaptable to mobile displays, without the need to create complex interfaces * the '''Blogs''': blogs are easily readable from users in mobility, since do not require high attention or concentration, and are also easily adaptable to small displays * the '''Events''': events, visible on Forum Nokia homepage, are few items with a short descriptive text ==Step 2. Designing the user interface== ===The style=== The Forum Nokia website has a well-known and '''established look-and-feel''', consisting of '''clear colors (mainly blue and green-based)''' and a '''polite interface'''. When mobilizing a website, it is highly recommended to '''follow the style guidelines of the original website''', so the Forum Nokia widget presented here will use the same style and colors of the Forum Nokia website. ===Representing the sections=== The widget has '''3 types of content: blogs, boards and events'''. * The first two, '''blogs and boards''', are typically composed by longer textual information, structured in a '''descriptive title and a full HTML description, possibly containing images and other media'''. So, for blogs and boards it has sense to use a '''master-detail pattern''', where the master view shows a list of titles, and the detail view shows the detail of the chosen item. * '''Events''', instead, are typically represented by simpler and shorter texts than the other two sections. So, in order also to create a more dynamic user interface, events will be '''represented by a news ticker positioned just below the widget's header''', and will be always visible. So, the component shown in this Forum Nokia Wiki article can be used: [[News Ticker JavaScript component for Web Runtime]]. ===First interface draft=== The '''first user interface''' draft is represented by the following picture.<br> [[Image:Wrt_mobilising_fn_layout_0.png]]<br> It has three main elements: * a '''top header''', containing the widget's logo and title * a '''news ticker''', showing the events' information * a '''main view''', where blogs and boards content is displayed ===Showing clear information=== Users in mobility need '''clear and easily readable information'''. This means several things: * '''colors must be carefully chosen''', in order to have clearly readable text, with '''optimal contrast''' * '''font size''' must not be too small. In order to take into account users with different visual needs, '''resizable fonts''' are an optimal choice. The approach described in this article is so used: [[How to dynamically change font size in Web Runtime widgets]] In order to allow users to freely change the font size, a '''Settings view is added to the widget''', that can potentially be used for other relevant actions and settings. ===Different screens and input methods=== Touch-enabled devices also have larger displays to represent the widget's information. For these reasons, it makes sense to design two slightly different interfaces depending on the user device: * on touch-enabled devices, softkey option items can be replaced by buttons placed within the widget's interface * on non touch-enabled devices, classical softkey items are used, in order to save space for the widget's main content The layout will so be structured as described in this Forum Nokia Wiki article: [[How to build a Web Runtime layout with Header and Buttons Bar]] The '''buttons' bar will contain 3 buttons''', allowing users to switch between the main views of the widget: * a button for the Blogs section * a button for the Discussion Boards section * a button for the Settings view ===Final layout draft=== The following pictures show the '''final widget's user interface drafts''', both for small and large/touch-enabled displays:<br/> '''Layout for small displays'''<br/> [[Image:Wrt_mobilising_fn_layout_s.png]]<br/> '''Layout for large displays'''<br/> [[Image:Wrt_mobilising_fn_layout_b.png]] ==Step 3. Retrieving information from network== The three widget's sections have '''RSS feeds''' that allow mobile applications to easily access their content. These feeds are so used to dynamically '''retrieve the information with Ajax network requests'''. ===Updating the information=== Information changes, and so needs to be '''refreshed''' within the widget itself. In this case there are typically '''two choices''': * use a '''"refresh/update" button''' to allow users to refresh the content of a view * implement an '''auto-refresh mechanism''' that periodically retrieves and shows the updated information The '''last approach''' is, from a usability point of view, the best one, since allow users to have '''updated information without requiring any extra steps''' or user interactions. In order to allow the user to have control over the auto-refresh functionality, an '''option is added to the Settings screen, allowing users to change the refresh interval'''. ==Step 4. Showing the information== Now that layout structure is ready, and information can be easily retrieved with Ajax calls, next step is to actually '''show the information to the user'''. The following screenshots show the blogs and discussion boards screenshots, of the '''touch-enabled version''' of the widget: <br>'''Views of Blogs section'''<br> [[Image:Wrt_mobilising_fn_blogs_b.png]]<br> '''Views of Discussion Boards section'''<br> [[Image:Wrt_mobilising_fn_dibo_b.png]]<br> In order to allow a '''better visualization of the retrieved RSS data''', some extra handling of this data is performed: * '''images are dynamically resized''' according to the display width * '''links are modified, in order to use the widget.openURL() function''', so to open them in the S60 web browser * '''embedded objects are removed''' ==Step 5. Managing user settings== The '''settings view''' contains controls that allow users to manage the following settings: * the font size * the auto-refresh interval The final layout of the settings view is shown by the following image:<br/> [[Image:Wrt_mobilising_fn_sett_b.png]]<br/> Since settings must be kept between different usage sessions, the widget '''setPreferenceForKey() and preferenceForKey()''' methods are used. ==Step 6. Widget's update mechanism== Widgets, as any other mobile applications, could need to be updated in order to fix bugs, add features or simply do some code changes. In order to allow the Forum Nokia widget to be updated, two different techniques are used: * a standard check and update mechanism, as described here: [[How-to create self-updating WRT widgets]]. With this approach, a new widget, if available, is '''downloaded and installed''' over the old version. * an alternative code-update technique, described here: [[How to update WRT widgets without installing a new version]]. This technique allows to '''update the widget's code without requiring a new version to be downloaded''' over the old one, so improving the widget's usability and reducing network traffic. ===Adding the about/update view=== In order to allow the user to check for updates, another view is added to the widget. Since this view is not strictly related to widget's content, the button to access it, on touchscreen devices, is placed in the widget's header, on the right side of the Forum Nokia logo. The about screen is visible in the following screenshot:<br/> [[Image:Wrt_mobilising_fn_about_b.png]] ==Step 7. Usability refinements== Now that the main widget's graphics and layout are ready, some refinements can be done in order to improve the overall usability. ===Adding tactile feedback=== Tactile feedback allows to improve the user feelings about the interface responsiveness, by giving him immediate feedback about user interactions. In order to add tactile feedback to this widget, the following declarative approach is used: [[How to declaratively add tactile feedback in WRT widgets]] ===Optimizing spaces for small displays=== The screenshots view in the previous sections show the widget running on touchscreen devices, with 360x640 resolution. In order to optimize spaces on devices with smaller displays, some elements can be adjusted and resized. The screenshots below show the various widget's views running in a 240x320 display:<br/> [[Image:Wrt_mobilising_fn_shots_l.png]] ==Step 8. Create an icon== Before releasing the widget, an '''icon must be created''', in order to identify the widget within the phone menu. An example icon (a 88x88 PNG image) is visible below:<br/> [[Image:Wrt_mobilising_fn_icon.png]] ==Step 9. Deploy!== All is ready, so what remains to do is to do a lot of testing, on both touch enabled and non-touch enabled devices, to see if all works well. ==Further development== Many '''adjustments and improvements''' are possible to the presented widget. Examples include: * allowing the user to '''choose the discussion boards of interests''', so '''filtering the RSS feed''' depending on his preferences * adding a '''home screen version''' of the widget, that displays latest RSS data on the device home screen ==Downloads== The Forum Nokia widget developed for this article is available for download here: [[Media:ForumNokiaWidget.zip]]

Return to Mobilising websites: building a WRT widget for the Forum Nokia website.