KSB Mobile App Style Guide 4. Tablets 1. KSB Mobile App Style Guide

Transcription

1 KSB Mobile App Style Guide 4. Tablets KSB Mobile App Style Guide April 05

2 KSB Mobile App Style Guide Introduction KSB creates mobile applications for the iphone and ipad as well as for smartphones and tablets running the Android operating system. This style guide defines clear guidelines to ensure that the KSB brand is easily recognised in mobile applications. These guidelines allow us to maintain formal consistency among the various KSB apps and adapt the basic specifications of the KSB corporate design for mobile services. KSB Aktiengesellschaft / Last updated: April 05

3 KSB Mobile App Style Guide Contents 3. Design Basics. Special aspects of using mobile devices...5. Principles of the different operating systems Fonts Colours Logo Language selection Images App icon....9 Launch screen.... ios Smartphones. Interactive elements Navigation with tab bar Off-canvas navigation Buttons and text links Teaser buttons Lists Input fields Settings Other interactive elements Fonts Tables Sample designs Android Smartphones 3. Interactive elements Navigation Buttons and text links Teaser buttons Lists Input fields Settings Tabs Fonts Tables Sample designs...4 KSB Aktiengesellschaft / Last updated: April Tablets 4. General Split view User Interface Adaptation 5. Portrait and landscape format Adapting to other display screen sizes...48

4 KSB Mobile App Style Guide 4. Tablets 4. Design Basics

5 KSB Mobile App Style Guide. Design Basics 5. Special aspects of using mobile devices Digital products are conceived and designed in relation to the end device of the user and the user scenario. The way that smartphone apps are used involves a different set of design requirements than those that apply to Web sites, for example. Smartphones are typically used on the go, in situations in which users can become more quickly distracted by their environment. This is why only key, relevant content should be displayed in an app. To this end, ensure that you incorporate flat hierarchies and just a few navigation levels to keep the structure of the app easy to view. Interactive elements must appear larger than on the Web to ensure that they can be clicked on with a finger, which in turn requires more space. Utilise the strengths of mobile devices such as location-specific services, GPS and device sensors to provide for a helpful and useful interactive experience. Also avoid their pitfalls, however, such as asking users to complete lengthy forms. In addition, take potential constraints into account, like the environment in which the user would like to complete specific tasks. What are the lighting conditions, for instance? Many navigation apps allow users to configure a bright version for use in normal daylight conditions and a darker one that does not dazzle as much for use during the evening and in the night. KSB Aktiengesellschaft / Last updated: April 05

6 KSB Mobile App Style Guide. Design Basics 6. Principles of the different operating systems The KSB App Style Guide defines the appearance of KSB apps for the two most widely used operating systems: Apple ios and Google Android. Each operating system has its own design language and navigation principles, which form the basis for designing a KSB app. To ensure that KSB apps have a standardised appearance and can be easily used on both operating systems, the navigation principles of these systems must be taken into account when developing a KSB app. The ios and Google Android operating systems are updated at regular intervals. To minimise the outlay required to adapt KSB apps to these updates, the standard elements of the respective operating systems should be used when designing the apps. Apple ios The current specifications for the Apple ios operating system can be viewed on the Internet at: index.html (Date: 9 Feb. 05) All size specifications are given in non-retina pixels in this style guide (@x). In this context, px corresponds to pt. All designs were realised for the iphone 6 (334 x 750 px) and ios 8. All photos and images must be saved format to ensure that they do not appear fuzzy or blurred. Google Android The current specifications for the Android operating system version 5, Lollipop (with material design), can be viewed on the Internet at: introduction.html (Date: 9 Feb. 05) KSB Aktiengesellschaft / Last updated: April 05 All size specifications are given in dp in this style guide. All font sizes are given in sp. All designs were created in MDPI (360 x 640 px). MDPI is regarded as the baseline that is also incorporated in the official Android guidelines. MDPI makes it easier to scale to larger designs than the other way around. MDPI displays a design 00 % and is the equivalent of 00 % for Apple ios.

7 KSB Mobile App Style Guide. Design Basics 7.3 Fonts KSB applications generally use the default system fonts set for the operating system in question. Additional information on fonts can be found in the relevant sections on the ios smartphone and Android smartphone. Text is always left-aligned, or ragged right, and never justified. Text also never appears centred, except for button text. All text appears using mixed-case spelling, except for buttons on the Android system. The standardised spelling and notation of recurring text elements such as phone numbers, e- mail addresses and Internet addresses is defined in the CD section entitled Notation. Additional information on KSB fonts KSB Aktiengesellschaft / Last updated: April 05

8 KSB Mobile App Style Guide. Design Basics 8.4 Colours KSB blue is the most important colour of a KSB app and is used for buttons, text links and interactive elements. This ensures high recognition value and a standardised look that is aligned with the rest of KSB s corporate design. Call-to-action (CTA) buttons appear in the accent colour orange. Body text appears in black, whereas titles and headings/labels have a dark grey hue. Primary Accent KSB blue White Orange Red # RGB 5/0/53 #FFFFF RGB 55/55/55 #FF57F RGB 55/87/3 #de0c RGB //33 Buttons Text links Interactive elements Lists Tables Image background Input fields (ios) Notes Highlighting CTA buttons Error messages Warnings Secondary Black Grey Medium grey Light grey KSB Aktiengesellschaft / Last updated: April 05 # RGB 0/0/0 Body text Navigation bar title Tab bar title # RGB 85/85/85 Title Headings/Labels #CCC RGB 94/94/94 Inactive buttons #FFF RGB 4/4/4 Text level background

9 KSB Mobile App Style Guide. Design Basics 9.5 Logo The KSB logo appears in the app icon, on the launch screen and on the start page of every KSB application. If sufficient space is available, the KSB logo can also be placed on the subpages in the navigation bar (for ios) or in the app bar (for Android). Doing so may not be compliant with the guidelines established for the respective operating system, however, in which case the app would be rejected by Apple s App Store, for example. Therefore, when a new KSB app is designed, a decision must be made as to whether the KSB logo should appear on the subpages. If yes, the second step is to define exactly where the logo should be positioned. App icon Launch screen Start KSB Aktiengesellschaft / Last updated: April 05

10 KSB Mobile App Style Guide. Design Basics 0.6 Language selection If a KSB app is available in several languages, the app will automatically be displayed in the language the user has set for the operating system. It is also possible to limit or restrict an app to a specific country in the Apple App Store or the Google Play Store. If the international nature of the app or the language selection option itself should be readily visible, a menu item can be provided for changing the language (e.g. in settings). When designing a new KSB app, the KSB specialist department responsible must define the policy for handling or dealing with language versions..7 Images All images used in a KSB app correspond with the KSB photo style (also refer to the KSB photo style guidelines). Additional information on the KSB photo style: Not Image size Images must not be displayed too small in a KSB app and ideally should span the full width of the screen. Small images are only permitted as thumbnails in tables and lists. Arrangement Text is not combined with images. The image must be displayed over the full width above or below the corresponding text. KSB Aktiengesellschaft / Last updated: April 05 For the correct layout, see..8 Other interactive elements.

11 KSB Mobile App Style Guide. Design Basics.8 App icon The KSB brand is clearly communicated in every app icon. The app icon includes the image of the launch screen and the KSB logo. No text appears in the app icon itself. The app s display name appears in the icon label below the app icon on the home screen. Due to the limited number of characters that can be used, the display name generally does not include KSB. App icons for ios can be downloaded as PSD files. ios app icon ios home screen with KSB app icons 5 x 5 px 0 px 43% 30 x 33 px Note: To ensure that the display name appears in full on the home screen, the text should include no more than approximately characters. Longer names will be truncated with an ellipsis. Android product icon Android home screen with KSB product icon 400 x 400 dp KSB Aktiengesellschaft / Last updated: April 05 43% 36 x 04 dp Note: The length of the display name depends on the device being used. After the maximum length available is reached, the name is truncated with an ellipsis.

12 KSB Mobile App Style Guide. Design Basics.9 Launch screen The launch screen appears after the user starts the app and remains visible until the app has fully loaded. The time it takes to load an app can vary depending on the scope of the application. Once the app has fully loaded, the start page appears in place of the launch screen. Fixed elements of the launch screen include the KSB logo, the KSB brand claim, a large image with the wave and the name or title of the app. The image can be a product photo or another, appropriate motif, depending on the purpose and content of the app (also refer to the KSB photo style guidelines). The image that appears on the launch screen is also used for the app icon (see page ). Launch screens for Apple ios can be downloaded as PSD files. Additional definitions and specifications for ios launch screens: ios smartphone Android smartphone 30 px 30 px 0 dp 0 dp 50 px = /3 /3 px 45 px /3 /3 dp 45 dp 33% KSB Aktiengesellschaft / Last updated: April px 37% 7 x 7 px 7 x 3 px 7 px Heading Helvetica New Medium 35 px Line spacing 44 px Grey, RGB 85/85/85 7 x 7 dp dp Heading Roboto Medium 34 sp Line spacing 44 sp Grey, # x 3 dp

13 KSB Mobile App Style Guide. Design Basics 3 Android tablet Heading 0: Roboto Medium 56 sp, line spacing 64 sp, grey, # dp 40 dp /3 /3 ca. 6% px ca. 0% 94 x 30 dp ca. 40% 58 x 70 dp 30 dp ios tablet Heading 0: Helvetica New Medium 50 px, line spacing 60 px, grey, # px 40 px KSB Aktiengesellschaft / Last updated: April 05 ca. 6% 94 x 30 px /3 ca. 34% 30 px px /3 ca. 0% 58 x 70 px

14 KSB Mobile App Style Guide 4. Tablets 4. ios Smartphones

15 KSB Mobile App Style Guide. ios Smartphones 5. Interactive elements Different buttons, text links and the standard ios segmented controls element can be used for interactions in a KSB app... Navigation with tab bar Navigation elements are displayed in line with the ios standard. The lower tab bar navigation panel displays up to five menu items and is used if the user wants to quickly navigate between several items. The menu item selected in the tab bar is highlighted in blue. The navigation bar is used to navigate in the upper area. On the app s start page, the KSB logo is positioned centrally in the navigation bar. On the subpages, the centred title of the respective page appears at this position, so that users know where they are in the app. The tab bar is always displayed together with the navigation bar. Additional definitions and specifications for navigation bars: Use of standard icons: Start page with upper navigation bar and lower tab bar Status Bar = 0 px Subpage with page title in the navigation bar 64 x 8 px Navigation Bar = 44 px 3 KSB Aktiengesellschaft / Last updated: April 05 Tab Bar ca. 5 x 5 px Selected menu item in the tab bar Icons are taken from the standard ios collection. If icons are custom-designed, they must be formally aligned with the existing ios icons with respect to line thickness, corner rounding and similar. 3 The back button is positioned at the left in the navigation bar and takes the user back to the last page, to the higher-level menu item or to the start page. The toolbar is optionally located at the right in the navigation bar and includes additional functions on a page, such as search, share, note and edit.

16 KSB Mobile App Style Guide. ios Smartphones 6.. Off-canvas navigation The off-canvas menu is practical for navigating with more than five menu items that do not always need to be within view. The menu can only be accessed from the app s start page. The active menu item is highlighted by a blue line at the left margin. On all other subpages, a back button is positioned in place of the menu icon. Start page with off-canvas menu in the navigation bar Off-canvas menu open 60 px KSB Aktiengesellschaft / Last updated: April 05 Message icon Used for new messages in the inbox or important messages, for example Text link Helvetica New Regular 7 px KSB blue, RGB 5/0/53

17 KSB Mobile App Style Guide. ios Smartphones 7..3 Buttons und text links Standard buttons appear in KSB blue. Call-to-action buttons trigger an action (e.g. order, log on, download, purchase). These buttons appear in orange and should be used sparingly. A button can be inactive if forms have not been completed, fields have not been selected or a process has not been concluded, for example. On larger displays, only the width of the buttons is adapted, not the height. Clickable texts (text links) appear in KSB blue. Standard buttons 44 px Button Button: KSB blue, RGB 5/0/53 Text: White Button when pressed Button: 30 % black Text: White 3 3 Inactive button Button: Medium grey, RGB 94/94/94 Call-to-Action buttons 4 4 Button Button: Orange, RGB 55/87/3 Text: White 5 5 Button when pressed Button: 30 % black Text: White 3 KSB Aktiengesellschaft / Last updated: April 05 Text links Text links Text: Helvetica New Regular 7 px KSB blue, RGB 5/0/53 Text links, pressed 30% black

18 KSB Mobile App Style Guide. ios Smartphones 8..4 Teaser buttons Teaser buttons take the user to a subpage or to a page that contains additional information. A teaser can be used with a background photo on the start page. All buttons are displayed with rounded corners (6 px). On display screens of different sizes, only the width of these buttons is adapted, while graphics and images increase in size proportionately. See..3. Buttons for information on how the buttons appear when pressed, or clicked on. Teaser button on start page Teaser buttons, large Image height min. 50 px max. 0 px 44 px 5 px 5 px 5 px KSB Aktiengesellschaft / Last updated: April 05 5 px Button: KSB blue, RGB 3/75/47 Text: Helvetica Medium 7 px, white

19 KSB Mobile App Style Guide. ios Smartphones 9..4 Teaser buttons Teaser buttons, small 5 px Image height min. 50 px max. 75 px 60 px 5 px 5 px 5 px Background colour Light grey, RGB 4/4/4 Not KSB Aktiengesellschaft / Last updated: April 05 Related teaser buttons may not be separated.

20 KSB Mobile App Style Guide. ios Smartphones 0..5 Lists Interactive list rows measure 50 px in height (taller than the ios standard elements of 44 px) to improve usability. List rows that contain graphics measure 65 px in height. The graphics used should not include too many details and must be easy to view and recognise. Lists are always presented on a white background. The heading has a grey background. Basic lists Lists with thumbnails 50 px 65 px 3 KSB Aktiengesellschaft / Last updated: April 05 Heading 3 Helvetica New Medium 7 px Line spacing 3 px Grey, RGB 85/85/85 Text links Helvetica New Regular 7 px Line spacing 0 px KSB blue, RGB 5/0/53 Clicked: 30 % black 3 Image format 47 x 47 px

21 KSB Mobile App Style Guide. ios Smartphones..6 Input fields Input fields such as login fields are displayed in line with the ios standard. The fields span the full width of the screen and are grouped by topic, with no spaces between the rows. The input field titles have a grey background. KSB Aktiengesellschaft / Last updated: April 05

22 KSB Mobile App Style Guide. ios Smartphones..7 Settings The settings are displayed in line with the ios standard. The fields span the full width and are grouped by topic, with no spaces between the rows. Additional definitions and specifications for settings: KSB Aktiengesellschaft / Last updated: April 05

23 KSB Mobile App Style Guide. ios Smartphones 3..8 Other interactive elements Additional interactive elements are displayed in line with the ios standard. The segmented controls interactive element comprises two or more buttons arranged next to each other that display several possible statuses or menu items. On Android systems, tabs are used instead (see 3..7 Tabs). Only one item can be selected at a time. The item selected is highlighted in blue. Additional definitions and specifications for interactive elements: 3 Back button KSB blue, RGB 5/0/53 The name of the higher-level page can be placed to the right of the back button. Toolbar element E.g. text links or icons KSB blue, RGB 5/0/53 3 Segmented controls Helvetica New Regular 3 px KSB blue, RGB 5/0/53 Items selected are highlighted in blue. KSB Aktiengesellschaft / Last updated: April 05 Not permitted! The menu items of ios segmented controls always have the same importance, or significance, meaning that no one specific menu item is subordinate to another. The back button is always positioned left and takes the user to the next-highest menu level.

24 KSB Mobile App Style Guide. ios Smartphones 4. Fonts The respective ios system font is used (ios 8: Helvetica New). To provide a better backdrop and contrast for images and text, body text is presented on a light grey background (see.4 Colours). Headings always appear in grey, with body text in black and text links in blue. Heading Helvetica New Medium 35 px Line spacing 44 px Grey, RGB 85/85/85 Heading Helvetica New Medium 5 px Line spacing 33 px Grey, RGB 85/85/85 3 Heading 3 Helvetica New Medium 7 px Line spacing 3 px Grey, RGB 85/85/85 33 px 30 px 7 4 Body text Helvetica New Regular 6 px Line spacing px Black 4 5 Text navigation bar Helvetica New Medium 7 px Black 6 Text links Helvetica New Regular 7 px KSB blue, RGB 5/0/53 Clicked: 30 % black 7 Background Light grey, RGB KSB Aktiengesellschaft / Last updated: April

25 KSB Mobile App Style Guide. ios Smartphones 5.3 Tables Tables have a continuous white background. The heading of the table has a grey background. 8 px 3 Dividers px Light grey, RGB 4/4/4 KSB Aktiengesellschaft / Last updated: April 05 Heading 3 Helvetica New Medium 7 px Line spacing 3 px Grey, RGB 85/85/85 Table title Helvetica New Bold 3 px Line spacing 7 px Grey, RGB 85/85/85 3 Table text Helvetica New Regular 6 px Line spacing px Black

26 KSB Mobile App Style Guide. ios Smartphones.4 Sample designs Start page with full-scale teaser button KSB Aktiengesellschaft / Last updated: April 05 Front page with teaser buttons Off-canvas menu open Subpage with small teaser buttons 6

27 KSB Mobile App Style Guide. ios Smartphones 7.4 Sample designs Lists Lists with thumbnails Product details page Product details page with table and CTA button KSB Aktiengesellschaft / Last updated: April 05

28 KSB Mobile App Style Guide. ios Smartphones 8.4 Sample designs Product details page with full-screen image KSB Aktiengesellschaft / Last updated: April 05

29 KSB Mobile App Style Guide 4. Tablets 9 3. Android Smartphones

30 KSB Mobile App Style Guide 3. Android Smartphones Interactive elements Different buttons, text links and tabs can be used for interactions in a KSB app. 3.. Navigation The Android side navigation standard element is used for navigating. If there are only a few menu items, the side navigation element can be left out (not required). The menu items can then be accessed via the app bar navigation panel, for example. Additional definitions and specifications for navigation elements: App bar on the front page Navigation drawer Status Bar = 4 dp App Bar = 56 dp 40 x 64 dp 60 dp 54 dp 30 dp dp KSB Aktiengesellschaft / Last updated: April 05 Side navigation Toolbar The toolbar optionally appears at the right in the app bar and includes additional functions on a page, such as search, share, note and edit dp Navigation drawer The higher-level navigation drawer menu spans the full height of the display screen. When opened, it slides in from left to right over the current page. Secondary menu item Roboto Medium 5 pt, KSB blue, #336699

31 KSB Mobile App Style Guide 3. Android Smartphones 3 Open menu in toolbar 5 The back button is positioned on all subpages and takes the user back to the higher-level page. Back button 5 KSB Aktiengesellschaft / Last updated: April 05

32 KSB Mobile App Style Guide 3. Android Smartphones Buttons and text links Buttons are a material design standard element. Standard buttons appear in KSB blue. Call-toaction buttons trigger an action (e.g. order, log on, download, purchase). These buttons should be used sparingly. A button can be inactive if forms have not been completed, fields have not been selected or a process has not been concluded, for example. On larger displays, only the width of the buttons is adapted, not the height. Clickable texts (text links) appear in KSB blue. Additional definitions and specifications for buttons: Standard buttons 3 3 Button Button: KSB Blue, # Text: White Button when pressed Button: 30 % black Text: White Inactive button Button: Medium grey, #CCC Text: Grey, # Call-to-action buttons Button Button: Orange, #FF57F Text: White Button when pressed Button: 30 % black Text: White 3 36 dp 48 dp touch area Floating action Button (FAB) KSB Aktiengesellschaft / Last updated: April 05 Text links dp FAB Button: Orange, #FF57F Icon: White Text link Text: KSB blue, # Text link, pressed Text: KSB blue, # Background: Medium grey, #CCC Inactive text link Text: Medium grey, #CCC

33 KSB Mobile App Style Guide 3. Android Smartphones Teaser buttons Teaser buttons take the user to a subpage or to a page that contains additional information. A teaser can be used with a background photo on the start page. All teaser buttons are displayed with rounded corners (5 dp). On display screens of different sizes, only the width of the blue buttons is adapted, while the graphics and images increase in size proportionately. See 3.. Buttons for information on how the buttons appear when pressed. Teaser button on the start page Teaser buttons, large 6 dp Image height min. 70 dp max. 00 dp 48 dp 6 dp 6 dp 6 dp KSB Aktiengesellschaft / Last updated: April 05 Button: KSB blue, # Text: Roboto Medium 4 sp, white

34 KSB Mobile App Style Guide 3. Android Smartphones Teaser buttons Teaser buttons, small 6 dp Image Height Min. 70 dp Max. 90 dp 6 dp 6 dp 6 dp 60 dp Background colour Light grey, #FFF KSB Aktiengesellschaft / Last updated: April 05

35 KSB Mobile App Style Guide 3. Android Smartphones Lists Interactive list rows measure 5 dp in height to improve usability. List rows that contain graphics measure 7 dp in height. The graphics used should not include too many details and must be easy to view and recognise. Lists are always presented on a white background. The heading has a grey background. Additional definitions and specifications for lists: Basic lists Lists with thumbnails 5 dp 3 7 dp KSB Aktiengesellschaft / Last updated: April 05 Heading 3 Roboto Medium 6 sp Line spacing sp Grey, # List titles Roboto Medium 6 sp Line spacing sp Blue, # Image format 50 x 50 dp Background colour Light grey, #FFF

36 KSB Mobile App Style Guide 3. Android Smartphones Input fields Input fields such as login fields are displayed in line with the Android standard. Unlike with lists and tables, the text entered appears against a background shaded in light grey. Additional definitions and specifications for input fields: Input fields without text Input fields with text KSB Aktiengesellschaft / Last updated: April 05 Text entry Roboto Regular 6 sp Black

37 KSB Mobile App Style Guide 3. Android Smartphones Settings Settings are displayed in line with the Android standard. The fields span the full width and are grouped by topic, with no spaces between the rows. Additional definitions and specifications for settings: 5 dp KSB Aktiengesellschaft / Last updated: April 05 Heading of text entry Roboto Medium sp Grey, #555555

38 KSB Mobile App Style Guide 3. Android Smartphones Tabs Tabs allow users to navigate on a particular page and display several possible statuses or menu items. Only one tab item can be selected at a time. The tab item currently selected is highlighted with a blue line below the tab title. On ios devices, segmented controls are used in place of tabs (see..8 Other interactive elements). Additional definitions and specifications for tabs: Tabs with three menu items Scrollable tabs containing more than three menu items 74 dp 74 dp Tab title Roboto Medium 4 sp KSB blue, # KSB Aktiengesellschaft / Last updated: April 05

39 KSB Mobile App Style Guide 3. Android Smartphones Fonts The respective Android system font is used (for OS5: Roboto). To provide a better backdrop and contrast for images and text, body text is presented on a light grey background. Headings always appear in grey, with body text in black and text links in blue. 7 Heading Roboto Medium 34 sp 7 Line spacing 44 sp Grey, # dp 3 KSB Aktiengesellschaft / Last updated: April 05 Heading 4 App bar page title Roboto Medium sp Roboto Medium 0 sp Line spacing 8 sp Grey, # Grey, # Roboto Medium 6 sp Roboto Regular 6 sp Line spacing sp Line spacing sp Black Grey, # Background 3 Heading 3 Body text Light grey, #FFF 6 Text links Roboto Medium 6 sp Blue, # Clicked: 30 % black

40 KSB Mobile App Style Guide 3. Android Smartphones Tables Tables have a continuous white background. The heading of the table has a light grey background. 0 dp 3 0 dp 6 dp Dividers dp Light grey, #FFF KSB Aktiengesellschaft / Last updated: April 05 Heading 3 Roboto Medium 6 sp Line spacing sp Grey, # Table title Roboto Medium 4 sp Line spacing sp Black 3 Table text oboto Regular 6 sp Line spacing sp Black

41 KSB Mobile App Style Guide 3. Android Smartphones 3.4 Sample designs Start page with full-scale teaser button KSB Aktiengesellschaft / Last updated: April 05 Subpage with teaser buttons Navigation drawer Subpage with tabs 4

42 KSB Mobile App Style Guide 4. Tablets 4 4. Tablets

43 KSB Mobile App Style Guide 4. Tablets General A new app does not need to be programmed to adapt a smartphone app to a tablet device. All graphics and interface elements of the smartphone can also be used on the tablet. The sizes and styles of the interface elements remain as is but can vary in width, depending on the display screen (e.g. buttons, tables, tab bar and navigation bar). Otherwise, the same specifications that apply to smartphones running the ios or Android operating system also apply. Examples and resources for making tablet adaptations can be referred to in the specifications for the operating systems. The sample screenshot below shows the navigation drawer and the content area of an Android screen. The width of the navigation drawer and the height of the list elements correspond to smartphone standards.

44 KSB Mobile App Style Guide 4. Tablets Split view The advantage of large-screen tablets lies in combining several smartphone pages, which results in a split view. This allows space to be used more efficiently and makes it easier for the user to navigate the app. The split view also provides for a more streamlined overview of the content of the app. On this sample Android screen, a page containing teaser buttons is combined with the product page.

45 KSB Mobile App Style Guide 4. Tablets 45 On this sample ios screen, a list page is combined with a teaser button page.

46 KSB Mobile App Style Guide 4. Tablets User Interface Adaptation

47 KSB Mobile App Style Guide 5. User Interface Adaptation Portrait and landscape Apps can be designed in portrait and/or landscape format. Not every app needs to be designed to support both formats, however, as some applications lend themselves to a specific format (games, for example, are best played in landscape format). Changing the format can also be practical within an app for certain functions, as the following explains. The size of each element included on the screen generally remains as is when the format is changed. System buttons are adapted to the corresponding screen width, while the elements in the tab bar are distributed across the screen. Examples There are different ways to adapt an app designed in portrait format to landscape format:. The interface elements are realigned automatically. For example, two teaser buttons are arranged next to each other in portrait format, with three appearing in landscape format. List elements are adapted automatically and become wider.. Additional elements or functions are displayed in landscape format, such as a profile containing additional product details on a pump. 3. Supplementary or similar content is displayed in landscape format. For example, an app shows a list overview in portrait format and an additional diagram in landscape format. 4. Completely different contents can also be displayed in landscape format. In default portrait format, for example, all functions of a KSB app are displayed, while landscape format offers quick access to pump settings. Sample view of an ios smartphone in portrait and landscape format The status bar and tab bar can also be removed in landscape format to add more space for content if the app was also designed in portrait format.

48 KSB Mobile App Style Guide 5. User Interface Adaptation Adapting to other display screen sizes Interface elements are adapted differently for smaller and larger display screen sizes (e.g. for the iphone 6, the iphone 5 and tablets). In the process, standard elements such as the tab bar and navigation bar, buttons, tables and input fields retain their original height and only change in width. Graphics and images increase in size proportionately. iphone 6 iphone 5 Height remains identical Proportional Spacing remains identical Width Icons (= symbols, pictograms) and individual graphics remain as is.