GOING MOBILE

1. GOING MOBILE By Oleksandrgalyuk and leonidandrushchenko

2. The Challenges of Mobile Design Brian Fling once said: “Great mobile products are created, never ported. Start by understanding your users and the benefits the medium has to offer.” • Tiny screen sizes Mobile devices don’t have much space to present information. Because of limited screen size we don’t have luxury to use sidebars, long header menus, big images etc. The best idea is to take away all extra features and leave only the most important functions on the front page and either discard the rest or bury them deeper in the site. • Variable screen width It’s hard to make a design that works well on different screens that have different size. Scrolling on mobile is OK but screen width is very limited. It’s usually a good idea to create different versions of a site for different screen sizes. • Touch screens Most of mobile web access comes from devices with touch screens. It’s hard to touch small targets accurately with fingers. That’s why your links and buttons have to be large enough to hit easily.

3. The Challenges of Mobile Design • Difficulty of typing text Nobody like to type text on a touch screen. That’s why it’s best to limit unnecessary typing. Using autocompletion in text fields and prefilling form fields whenever possible is a good idea. • Challenging physical environment People use their phones and other devices in all kind of places: outside in the bright sun, in the dark theaters, in conference rooms, cars, buses, planes, stores, bathrooms, in bed and even on lectures in university. Considering light and ambient noise differences is essential. Another thing to think about is motion. Tiny text is hard to read when the device or the user is moving around. A tiny hit target on a touch screen device will be hard to use under the best of circumstances, but it can be nearly impossible for example in a jolting bus or when you try to find needed information asap when cheating on a test. • Social influence and limited attention Most of the time mobile users won’t spend lots of time and attention on your site or app. They’ll be looking at your design while doing other things – walking, riding, talking with other people, sitting on a meeting etc. Therefore, consider design for distracted users: making the task sequence easy, quick and simple.

4. The Patterns Vertical Stack Filmstrip Touch Tools Bottom Navigation Thumbnail-and-Text list Infinite List Generous Borders Text Clear Button Loading Indicators Richly Connected Apps Streamlined Branding

5. 1. Vertical Stack • What? Order of mobile page’s content in a vertical column, with little or no use of side-by-side elements. It lets text elements line-wrap, and the page scroll down past the bottom of most device screens. • When? Most mobile web pages that must work on devices of different sizes should use this pattern, especially if they contain text-based content and forms. In addition, this pattern is applicable when pages have a lot of content and it takes time to download. • Why? Devices come in different widths. It is hard to anticipate what the actual width in pixels will be, unless you detect the screen width at runtime or build apps for particular devices. A fixed-width design that is too big for the physical device can be scrolled sideways or zoomed, but these designs are never as usable as those that let the user simply scroll down.

6. 1. Vertical Stack • How? • Lay out the page’s content in a scrolling vertical column. Put the most important items on top and less important items farther down so that most users can see the important stuff. • Useful content, from the user’s perspective, should be on the top of this Vertical Stack. Don’t waste it with too tall logos, ads etc. • Put form labels above their controls, not next to them, to save horizontal space. • Put buttons side by side only if you are sure their total width will never be wider than the visible screen. If the buttons contain long text that might be subject to localization or font enlargements, forget it. • Thumbnail images can fit beside text fairly easily, and it is common to do this.

7. 2. Filmstrip • What? Arrange top-level pages side by side, and let the user swipe them back and forth to view them one at a time. • When? When you have pages of content that are conceptually parallel, such as the weather in different cities or the scores in different sports. Users won’t mind going through several of this pages before reaching the one they are looking for, because they are all potentially interesting. • Why? • Each item to be displayed can occupy the entire screen. This pattern encourages browsing since the user can’t jump straight to a desired screen and has to swipe through other content to get there. Also, swiping seems to be very satisfying gesture for some users. • A disadvantage of this pattern is that it doesn’t scale very well. You can’t use too many top-level pages, or users might get irritated at having to swipe too many times. In addition, it lack transparency.

8. 2. Filmstrip • How? • To display full-screen content, like images in a slideshow, only allow scrolling to reveal more images. Scrolling is most effective when side-to-side or horizontal to the ground. This means you have to account for orientation changes and make the display and interaction work in both portrait and landscape. • To display complex, page-level information, the pages do not need to be restricted to the size of the viewport. Scrolling sideways via touch or keys will perform the usual action to reveal a new page, but conventional vertical scroll may also be used. • Scrolling must always be “live”, or show the items moving on the screen. • If you want to give the user a clue that multiple top level pages exist, and that he can swipe between them, you can use something like a dot indicator.

9. 3. Touch Tools • What? Show tools only in response to a touch or key press, and put them in a small dynamic overlay atop the content. • When? When you design an immersive or full-screen experience, such as videos, photos, games, maps or books. To manage that experience, the user will sometimes need controls – navigation tools, media player tools, information about the content etc. The tools require significant space, but are rarely needed. • Why? • The content is allowed to dominate the experience most of the time. The user isn’t distracted by controls taking space and don’t lose their attention on the content. The user controls the experience by choosing when to show the tools.

10. 3. Touch Tools • How? • Show the unadorned content using the full screen. When the user touches the device’s screen or presses a particular key, show the tools. Many apps only show Touch Tools when the user touches a certain region of the screen. This way, the user doesn’t accidentally bring up tools. Also, you can bring up different tools when different regions of the screen are touched. • Show the tools in small, translucent area that appears to float above the content. The translucency makes the tools look ephemeral. • Remove the tools after a few seconds of nonuse, or immediately if the user taps the screen outside the bounds of the tools. It can be annoying to wait for the tools to go away by themselves.

11. 4. Bottom Navigation • What? Place global navigation at the bottom of the page, below the fold. • When? A mobile website needs to show some global navigation links, but these links represent low priority paths through the interface for many users. Your highest priority on the site’s front page is to show fresh, interesting content. • Why? • The top of a mobile home page is precious real estate. You should generally put only the two or three most important navigation links there – if any at all – and devote the rest of the front page to content that will interest most users. • A user looking for navigational links can easily scroll to the bottom of a page, even when those links are far below the fold.

12. 4. Bottom Navigation • How? • Create a set of vertically arranged menu items on the bottom of the page. • Make them easy to tap with a finger on touch screens – stretch them across the full width of the mobile page, and make the text large and readable. • In a mobile application, it’s not necessary to fit an entire site map into the footer – you only have a room for a few most important links. • Instead of taking up too much top-of-page space for navigation, push it to the bottom of the page, where real estate is less valuable.

13. 5. Thumbnail-and-Text List • What? Present a selectable list of items, with each item containing a thumbnail image, some text, and possibly smaller text as well. If appropriate, use bold colors, icons, and other visual differentiators. • When? If you need to show lists of articles, blog entries, videos, applications or other complex content. Many or all of these have associated images. You want to invite the user to click on these items and view them. • Why? • Thumbnail images improve text-only lists because they look appealing, help identify items, and establish a generous height for the list items. Reading conditions on mobile devices are not very great. By adding colorful images, you can improve the visual differentiation among items, which helps people scan and parse the list quickly.

14. 5. Thumbnail-and-Text List • How? • Place a thumbnail image next to the text of the item. Most sites and apps put the thumbnail on the left. • In addition to picture thumbnails, you can include other visual markers, such as five-star ratings or icons representing people’s social presence. • Don’t be afraid to use bright or saturated colors. In desktop context that might be not the best idea but in a mobile context, it works.

15. 6. Infinite List • What? This is the pattern where initially not all items are loaded to the page, but new chunks of them can be appended to the bottom of the list • Use when You need to show long lists of email messages, search results, an archive of articles or blog posts, or anything else that is effectively “bottomless.” • Why? The initial loading of a screenful or two of items is fast, and the user doesn’t get stuck waiting for a very long initial page load before she sees anything useful

16. How? We can do it in two ways: Using button Or without it

17. 7. Generous Borders • What? On devices with touch screens, put large margins and whitespace around buttons, links, and any other tappable control. • Use when You need to use buttons with text labels, or a list of items, or ordinary text-based links—in short, any touch target that isn’t already large on the screen. • Why? Touch targets must be large enough for clumsy fingers to hit successfully.

18. How? Surround each touch target with enough inner margin, border, and surrounding whitespace to make a sufficiently large hit target for fingertips. Exactly how big to make these targets is a very good question. Ideally, you want a size that ends up large enough on the physical device to be manipulated by most people—many of whom will have large fingers. So ultimately, how big should you make your targets? It depends on whom you ask. There’s no consensus on minimum target size.

19. 8. Text Clear Button • What? Clear a text field with one button press • Use when Whenever a text field is needed in the mobile interface, consider using a Text Clear Button. It is especially valuable for fields that hold long strings of text, such as search strings, URLs, and multiline text. • Why? Erasing long strings of text letter by letter is slow and error-prone. Don’t force your users to do this.

20. How? Put a simple “X” or “Clear” button into the text field. A button beside the text field can also work, though you’d want to usability-test it to find out whether users see it or not—they may see it as a “Go” or “Search” button instead. If the platform offers a “Clear” button as a built-in feature for text fields, use it.

21. 9. Richly Connected Apps • What? Inside your mobile app put direct links to other apps, such as the phone dialer, map, or browser. “Prefill” them with data from the user’s current context. • Use when The mobile app shows data that is “connectable” in obvious ways, such as phone numbers and hyperlinks. • Why? A user can only see one mobile app at a time, even when multiple apps are being used at once, and it’s annoying to switch between them by hand.Mobile devices often have enough context and available functionality to offer intelligent paths between apps.

22. How? In your app, keep track of data that might be closely associated with other apps or ser-vices. When the user taps or selects that data, or uses special affordances that you provide, open another app and handle the data there. Here are some examples. Consider all the ways that data in your app can connect directly to other mobile functions.• Phone numbers connect to the dialer.• Addresses connect to the map, or to the contacts app.• Dates connect to the calendar.• Email addresses connect to the email app.• Hyperlinks connect to the browser.• Music and videos connect to media players.In addition, you might be able to do such things as take a picture, or use a map, entirely within the context of your application.

23. 10. Loading Indicators • What? While a page or page section is loading, show a progress indicator in the place where it will be (or where the user tapped or clicked). • Use when The user has to wait for content to load, especially in a page that changes dynamically in response to user interaction. • Why? Loading new content can be slow and erratic over mobile connections.You should always show as much of a partially loaded page as you can, so the user can actually see something useful.

24. How? Show as much of the page as can be loaded quickly, but if part of it takes a long time, such as a graphic or video, show a lightweight animated progress indicator where the graphic will appear. (The mobile platform may supply a default indicator.)When the user initiates an action that causes part of the page to be reloaded—or loads a whole new page—show a progress indicator in situ on the page.

25. 11. Streamlined Branding • What? Use your organization’s logo, colors, and other brand elements on the mobile site or app, but keep them small on the screen and fast to load. • Use when All mobile apps or sites that are associated with a company or organization should use this. • Why? Users need to be able to identify your app or site as yours. In usability testing, people respond well to reliable, familiar branding, especially when the brand is already known outside of the mobile context.

26. How? Create a small version of your logo, no taller than around 50 pixels, so that it takes up as little vertical space as you can get away with. If you’re creating different designs for dif-ferent screen sizes or platforms, consider making different versions of the logo for each. Apply your brand’s colors and font families in the mobile design. A basic text interface may function well enough, but it won’t look professional or polished.  Avoid using very large and complex images as stylistic elements. Download time is as important in a mobile context as on the desktop (and often more so).

27. Thank You! do u know da wae?