Overview

Unit 1: Mobile Platforms and Mobile Interface Design

Topics:

• An Introduction To Mobile Development • Mobile platforms: Android, iOS, Windows, Web Technologies • What is a mobile application? • What is the difference between native application development and mobile web

frameworks? • Best practices in design of mobile interfaces • The link between user experience and mobile interface design • Introduction to tools for mobile interface design

Learning Objectives:

By the end of this Unit, you will be able to:

1. List and differentiate between current mobile platforms. 2. Compare and contrast mobile web frameworks and native applications . 3. Define the importance of designing mobile apps. 4. Design the interface of a mobile application.

Tasks:

• Use the Introductions Discussion Forum to introduce yourself to the class. List your prior experience with mobile technology, if any, and describe how the subject relates to your country and/or culture.

• Read the Learning Guide and Reading Assignments • Participate in the Discussion Assignment (post, comment, and rate in the Discussion

Forum) • Navigate in a web browser to address: http://www.programmr.com Next, click on

Android menu. Please click on any of the sample mobile applications and make sure your browser has the necessary plugins to run mobile applications. This site will be used later in the course, but now is the time to work through any technical difficulties.

• Complete and submit the Programming Assignment • Make entries to the Learning Journal • Take the Self-Quiz

Introduction

Mobile Applications is an exciting field of Information Technology powering phones, tables, Televisions, and even refrigerators. This Unit will introduce the most popular mobile platforms. It will also describe the major two approaches to delivering content on mobile devices: mobile web and native applications. Mobile technology changed the way people find directions for travel, how they find shopping opportunities, how they communicate with one another. In a way, since the invention of movable print type by Gutenberg, mobile devices put the knowledge, the resources, the capacity to be a part of the global community into the hands of common people. The future of any industry involves mobile devices and mobile applications.

This technology introduced a new way of working with machines. Through touch and swipe users interact with software without reading any instructions. The invention of a mobile app and the design of the app often does not involve any technology. These take place inside of a person's head. The creative thinkers of the Information Technology industry first design their interfaces, these in turn are blueprints for apps that make them millionaires or build their reputation. In this unit you will consider how to design and draw mobile apps.

Reading Assignment

Read Introduction to Mobile Apps and Android (pages 1-14), Blackberry and iOS (pages 24-51), Windows and Cross Platform (pages 73-108) and Mobile Web (pages 111-123) in the Mobile Developers Guide to the Galaxy

Balaz, A., Bartels, B., Bloor, R., Churchill, D., Graf, O., Gülle, R., Harty, J., Heubel, B., Iliescu, O., Johnson, G., Jonsson, A., Kapetanakis, M., Koch, M., Messerschmidt, T., Readfern-Gray, G., Repty, A., Ross, M., Rouffineau, T., Schmidt, A., Shuqair, M., Tabor, M., Thain, I., and Virkus, R. (2012). Mobile Developers Guide to the Galaxy, 11th ed.

Creative Commons Some Rights Reserved License

Read the following sections from the Android Textbook: Meet Your Android, Get Started with Android, The Home Screen, Notifications and the Notification Bar, Keyboard and Voice Input, Buttons and Finger Controls

Purdy, Kevin (2010), The Complete Android Guide, http://www.completeguides.net/01_The_Complete_Android_Guide

Mobile Interface Design:

Please read the following articles about mobile interface design: IBM DeveloperWorks: http://www.ibm.com/developerworks/web/library/wa-interface/index.html

Mobile Application Design Best Practices – Keegan Jones and Tim Van Damme http://www.melodiesinmarketing.com/2011/01/10/mobile-application-design-development-app-web-user-interface-interaction/ Design Best Practices for the Mobile Web http://www.onextrapixel.com/2012/01/02/design-best-practices-for-the-mobile-web/ Mobile UI Design – User Centered Design and UI Best Practices http://www.slideshare.net/OpenRoad/mobile-ui-design-user-centered-design-and-ui-best-practices

Discussion Assignment

What makes a good experience of a mobile device user and what causes a poor experience? What design features of a mobile application affect the user experience?

Programming Assignment

In this assignment you will design a mobile app. In the first part you will learn how to take a screenshot, and later you will follow instructions on how to design an app.

Part 1: Screenshot Steps

1. First, press the Print Screen key on your keyboard. On a standard keyboard the key is in the upper-right side. It will say Prt Scr on the key. Below you will find a picture showing Print Screen key. Press the key. When you do, nothing will happen, the computer will remember what you are looking at on the screen. 2. Open the Paint program or a Word Processing program. 3. Go to Edit -> Paste, and paste in the image from computer memory. 4. You will now be looking at a screenshot of your screen. Go to File -> Save As and save the picture file as: Screenshot.png

Make sure to remember where you saved the file. It could be under Documents or Pictures.

Part 2: Design Mobile App

Use the iPhoneMockup web based mobile application design tool and sketch up an interface for your own application.

You have to come up with an idea for a new application. Sometimes a simple application is better. Perhaps an application, which calculates gas mileage or allows you to take pictures of your garden plants and share them. You will select the buttons, text boxes, and other elements as a prototype of an actual application. This will result in a picture of what the application will look like. Please save the screenshot of your work and submit to the assignment. http://iphonemockup.lkmc.ch/ This assignment will help you to explore mobile application buttons, and various other controls.

The design should be uploaded as a .png picture. You can submit the work as 3 separate pictures in a single zip file. The pictures must contain:

1. Three mobile screens ( each screen is part of the overall application ). 2. Keyboard entry object 3. Navigation button 4. Checkbox 5. On/Off control 6. Picker

Learning Journal

A guide for writing a “reflective journal:”

Who will read the journal?

The contents of your journal will be only visible to the instructor. Unlike discussion forums or blogs, the journal is an area for reflection without a wide audience.

Why do it?

Maintaining a journal serves several purposes:

1. A means of communication, conversation (e.g., between material and yourself, yourself and instructors).

2. Provides regular feedback between you and the instructors and helps to match expectations.

3. Platform for synthesis of knowledge and ideas

4. Help develop critical thinking

5. Helps to elicit topics of interest, challenging topics that need improvement, etc.

What to write?

First write a brief summary of the contents of a lecture, lab activity, group discussion or reading material. Then reflect upon these activities- record your own thoughts, ideas, responses and reactions to any of the above activities. Make notes about concepts, questions you have, and any confusion that may arise. Use the journal to explore possible solutions to problems being raised in class or alternative activities to the ones presented in class. Record new insights and problem solving strategies realized during discussions with fellow students and instructors. The journal reflects your own thoughts and ideas. Be as original and critical (constructive) as you can.

When do I use the journal?

You are expected to use the journal for each week of the course.

How will it be graded?

Each weekly journal must be at least 100 words long. Please use proper grammar and keep your writing on the class topic. You will receive a single grade at the end of the course for all weekly journals you complete.

Self-Quiz

The Self-Quiz gives you an opportunity to self-assess your knowledge of what you have learned so far. The results of the Self-Quiz do not count towards your final grade, but the quiz is an

important part of the University’s learning process and it is expected that you will take it to ensure understanding of the materials presented. Reviewing and analyzing your results will help you perform better on future Graded Quizzes and the Final Exam. Please access the Self-Quiz on the main course homepage; it will be listed inside the Unit.