Создание интерфейса приложения для Nokia Series 40

  • Published on
    03-Sep-2014

  • View
    1.971

  • Download
    1

DESCRIPTION

, Nokia Series 40

Transcript

<ul><li> Series 40 Web Apps UX GuidelinesKey information on the interaction models and visual styles of Series 40 web app Document created on 9 June 2011 Version 1.0 </li> <li> Table of contents1. Introduction 4 1.1 Audience 42. Key UX considerations 5 2.1 Displays 5 2.1.1 Screen size 5 2.1.2 Selectable object size 6 2.1.3 Screen orientation 9 2.2 Navigation 10 2.2.1 Non-touch device behaviour 10 2.2.2 Location of basic navigation controls 11 2.2.3 Scrolling 11 2.2.4 Focus on discrete tasks 13 2.2.5 Consistent interactions 14 2.3 Text and graphics 15 2.3.1 Consistent use of text 15 2.3.2 Align elements 16 2.3.3 Clear visual hierarchy 16 2.3.4 Richer visual elements 17 2.3.5 Use a common set of icons 18 2.4 Device consistency 19 2.5 Common application flow models 20 2.5.1 The models 20 2.5.2 Examples 223. Touch gestures 38 3.1 Tap gesture 39 3.2 Swipe 404. UI graphic elements 41 4.1 Lists 41 4.2 Tabs 42 4.3 Text fields 43 4.4 Buttons 445. Styles and specs 45 5.1 Top header bar and navigation icons 45 5.2 Buttons 47 5.2.1 Primary and secondary buttons 47 5.2.2 Tertiary icons- buttons 48 5.3 Form elements 49 5.3.1 General elements 49 5.3.2 Input fields 496. Specs for standard components 51 6.1 Header and sub-header components 51 6.2 List items 53 6.3 Content 56 6.4 Tabs 56Series 40 Web Apps UX Guidelines 2 </li> <li> Change history9 June 2011 1.0 Initial document releaseSeries 40 Web Apps UX Guidelines 3 </li> <li> 1. IntroductionThis guide provides developers and designers with the key information required to createSeries 40 web apps that are consistent in look and feel as well as functional behaviour. This isachieved by describing the common Series 40 device characteristics and features of Series 40web apps.1.1 AudienceThe primary audience for this guide is experienced web developers and designers who are capable of creatinggood quality applications from scratch, but are not yet doing so commercially, as shown in Figure 1. Byfollowing these guidelines, adopting the interaction patterns described in the examples, and using the assetsdefined in Chapter 4, UI graphic elements, developers and designers will be able to create commercial qualityweb apps that offer an outstanding UX on Series 40 devices.Figure 1: This guides target audience is shown.Series 40 Web Apps UX Guidelines 4 </li> <li> 2. Key UX considerationsThis chapter introduces the key factors that need to be considered when developing Series 40 web apps: Displays the resolution and physical size of screens on Series 40 devices and their effect on UX. Navigation use of clear and consistent navigation to support the user in understanding the features and functions of the web app. Also, considering whether the user has a keyboard or touch screen with which to interact with the application. Text and graphics use of sophisticated graphics to build the users trust and confidence in the web app. Also consistency in the use of text and graphics and the layout of these elements to ensure UI components are easy to identify and thereby easy to use. Device consistency ensuring web app behaviour is consistent with the device behaviour, to offer the users a familiar and consistent UX.2.1 DisplaysThis chapter discusses the characteristics of the displays on Series 40 devices and how they affect UX.2.1.1 Screen sizeSeries 40 devices that support web apps, whether they support keyboard only orTouch and Type UIs, offer screens with a resolution of 240 x 320-pixels. Typicallythe physical size of the screen, as shown in Figure 2, is 39.2 x 52.2 mm. Comparedto the size of screen offered by a typical smartphone, this is small. Web app designsneed to account for the screen size in two ways, by ensuring that the content iseasy to see and read, and that controls are sized so they are easy to select particularly on Touch and Type devices. Figure 2: Typical physical Series 40 screen size is shown.Series 40 Web Apps UX Guidelines 5 </li> <li> 2.1.2 Selectable object sizeCare has to be taken in creating selectable objects for Series 40 devices offering the Touch and Type UI. Anobjects optimal size is influenced by the nature of the object, specifically whether its a: discrete touchable area. part of a collection of touchable areas occupying all or part of the screen. button. Note: These recommendations apply to the current Touch and Type devices, which offer a 240 x 320-pixel screen of 2.4 in size. Series 40 web apps should be developed to allow for the release of devices with alternative screen resolutions and sizes.2.1.2.1 Discrete touchable areasThe recommendations for object sizes when using fingers and thumbs are listed in Table 1.Dimension 2.4 QVGA screenDiagonal 2.4Height 320 pixelsWidth 240 pixelsFinger activated object size, equivalent to 6.1 mm 40 pixelsVertical finger activated object gap, equivalent to 1mm 7 pixelsHorizontal finger activated object gap, equivalent to 1.23 mm 16 pixelsThumb activated object size, equivalent to 8 mm 52 pixelsVertical thumb activated object gap, equivalent to 1.25 mm 8 pixelsHorizontal thumb activated object gap, equivalent to 3 mm 20 pixelsTable 1: Recommended object and gap sizes are listed.Series 40 Web Apps UX Guidelines 6 </li> <li> 2.1.2.2 Collection of touchable areasWhen dealing with a collection of touchable areas think of the screen as a 6 x 8 grid of touchable slots, as shownin Figure 3, with each element being 40 x 40-pixels in size.Figure 3: The dimensions of touchable elements within a 6 x 8 grid are shown.Series 40 Web Apps UX Guidelines 7 </li> <li> 2.1.2.3 ButtonsThe recommended dimensions of buttons on a 2.4 QVGA screen are listed in Table 2. Dimension (pixels) Physical dimensions (mm) Height Width Height WidthStandard button 40 40 6.1 6.1Minimum size for rectangular 48 30 7.0 5.0buttonTable 2: Physical and pixel sizes for standard and rectangular buttons are listed.Series 40 Web Apps UX Guidelines 8 </li> <li> 2.1.3 Screen orientationScreens on Series 40 devices are offered in portrait (240 x 320 pixels) and landscape (320 x 240 pixels)orientations, as shown in Figure 4. The majority of Series 40 devices employ a screen in portrait orientation. Webapp designs need to accommodate these two orientations and ensure that full use of the available screen realestate is made. Guidance on how to detect and set CSS files based on screen orientation are provided in theAccommodating screen orientation chapter of the Series 40 Web Apps Best Practices Guide document.Figure 4: A selection of Series 40 devices, with portrait and landscape screens, are shown.Series 40 Web Apps UX Guidelines 9 </li> <li> 2.2 Navigation2.2.1 Non-touch device behaviourThe main difference between non-touch and Touch and Type devices is that non-touch phones have threesoftkeys (a left, middle, and right key) and a navipad which the user uses to interact with the web app.On non-touch devices permanent soft keys replace all actions that occur in the chrome of Touch and Typedevices, as shown in Figure 5.A Touch and Type application view A Touch and Type application view A non-touch application viewwithout the bottom category bar, with the bottom category bar and showing the softkey bar. The usershowing the icon used to open its Options and Back icons shown, can invoke Options by pressing thethe category bar on the bottom- left softkey and Back by pressingright of the screen. the right softkey.Figure 5: The UI differences between touch and non-touch devices are shown.Series 40 Web Apps UX Guidelines 10 </li> <li> 2.2.2 Location of basic navigation controlsTo provide clear and consistent web app navigation its recommended that all basic navigation functions shouldappear at the top of the application view, as shown in Figure 6.The app logo should always be in Paging controls should be The icon in the top right of thethe top bar. This logo should link to displayed directly below the app header can be contextual.the web apps home page. header.Figure 6: Various layouts for web app navigation are shown. Note: If the app has no need for basic navigation functions, when the app consists of a single screen for example, the navigation options should be omitted from the header.Series 40 Web Apps UX Guidelines 11 </li> <li> 2.2.3 ScrollingWhen page content exceeds the size of the screen, its content can extend outside the screen, however it shouldextend below the screen only. This is to ensure the pages in a web app are easy to read; as such scrolling shouldbe limited to vertical scrolling (up and down), as shown in Figure 7. This approach fits well with typical usage, asmost users are naturally familiar with reading below the page fold. Horizontal (left and right) scrolling should beavoided, as this could make navigation within the app cumbersome and unfriendly.Figure 7: The use of vertical scrolling only is shown.Series 40 Web Apps UX Guidelines 12 </li> <li> 2.2.4 Focus on discrete tasksBecause of the small screen size on Series 40 devices, web apps screens are limited in the content that they candisplay without requiring scrolling. Its therefore recommended that each screen should focus on one task at atime. In addition, the minimum number of interface elements required to complete the task should be used tokeep interactions simple.Where a task is inherently complex, it should be divided over several screens. The key is to avoid clutter, soconsider using tabs and expandable lists to keep the UI clean and simple, as shown in Figure 8.Screen 1: Start the task Screen 2: Choose a Screen 3: Choose a sub- Screen 4: Browse the category category resultsFigure 8: Dividing a complex task into simple, single task steps is shown.Series 40 Web Apps UX Guidelines 13 </li> <li> 2.2.5 Consistent interactionsConsistent interaction patterns make it easy for users to understand how to use your web app. For example,style all buttons similarly by using common button size, text size, and text case, as shown in Figure 9. This willenable users to distinguish buttons from icons or other interactive elements easily. You can use visual highlights,such as colour, to emphasise different outcome types that can result from pressing a button.Figure 9: Common styling of buttons, so they are easily recognised, is shown.Series 40 Web Apps UX Guidelines...</li></ul>

Recommended

View more >