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 J ournal
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., Glle, 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, 11
th
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 J ones 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 Universitys 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.