Mobile Application Design Curriculum: Creating An Information Architecture System Design For Mobile Applications(Lesson 4)



Introduction:
In this lesson you will organize your collected marketing, content and technology based decisions regarding your mobile application. You will learn about the current trends in system design in modern mobile applications. You will apply these components to an organized system design which displays your strategy and intended design for how users will interact with your application. Creating the information system architecture will reveal how a user will interact with the layout of information and the intended technology based outcomes.



Lesson Objectives:
By the end of this lesson, you will be able to:
Section #1:
1. Investigate and consider a variety of technologies in the backend of an application(data storage,platform needs,app server)  for integration into the layout of your application’s system design.
Section #2
2. Investigate and summarize a variety of  API technologies available for mobile applications.
Section #3:
3. Organize and create a clear design for the organization of information presented to the user by creating multiple informative drawings. (draw map of application layout)
Learning Sequence
Required Reading
Read the following:
Section #1: Understanding The “Backend” Of Mobile Applications
View & Review: Enterprise Mobile App UX: Designing from UI to Backend  Presenter:Sanjeev Sharma
Read: Android Vs. IOS Comparing Development By: Cameron Henneke
Section #2: Introduction To Mobile API’s
Read : Defintion Of API’s Webopedia
Read : API Architectures For Etail By:Michael Gardener
Read:  Open Source API Library APigee Blog
Section #3: Creating A Mobile Information Architecture
Read: Information Architecture Vocabulary By: Jesse James Garrett
Read & Review: Relationships Cheatsheet (Garrett)
Read & Review: Shape Quickguide (Garrett)
Read & Review: Sample System Architecture (Garrett)
Resources
Assignments
Complete the following assignments:
1. Short Answer “Mobile Backend” Assignment
2. Short Answer “API” Assignment
3. Drawn Graphic: Creating The Mobile System Architecture

Instruction
Section #1: Understanding The Backend Of Mobile Applications
This section prepares you to be able to address the central components of  the backend technology of mobile applications. Knowledge of the software architecture which is called the “backend” will  drive your design approach and choice of platform and type(native,hybrid or web) of your application. This section will provide you with an overview of the components,purposes and role the “backend” technology plays in application design.



This reading provides an overview of the role the backend of an application provides and some of the challenges and choices developers and designers face when trying to develop an application which provides specific functionality as well as scalability with users. This article provides an overview of the services available to developers and designers to streamline the development of the backend of applications. These services will enable specific technologies such as geolocation,file storage and push notifications to be available to your users.
In the role of mobile designer it is critical to connect the focus of the app designs’ user experience(UX) to the choice of technologies(file storage,push notification,user logins) and application platform choice (web app, native or  hybrid). This video will provide you with design approaches which will take into account the backend needs and design approach. The presenter Sanjeev Sharma is a user experience (UX) designer with 17 years as a Solutions Architect with IBM.
Read: Android Vs. IOS Comparing Development By: Cameron Henneke
This reading provides a breakdown of the design and development choices between choosing Android and IOS in the process of creating a task application. Focus on the “Architecture” section of this reading found near the bottom of the web page. This section will provide the distinct choices made for the “data and storage” functions of the application. It is important to your understanding of the software architecture of mobile development to see the context of how the “backend” architecture is integrated with the design(layouts,choice of users) and choice of plaforms(Android,IOS).
The writer of this reading is the designer and developer and clearly explains his choices in the process of its creation. Reading this entire article will provide you with a great project overview
Short Answer “Mobile Backend” Assignment:
After reviewing the resources and readings provided answer the following questions.
1.What are the benefits of understanding the “backend” of mobile applications as you plan for user engagement?
2.What trends do you anticipate with the  “backend” of mobile apps  with the constantly evolving mobile application types(native,hybrid,web)?
3.What will be your strategy for addressing concerns with the “backend” of you mobile application concept?



Section #2: Introduction To Mobile API’s
In this section of the lesson you will be introduced to the concept of mobile application API’s(Application Programming Interface) technology. The readings and resources in this section will provide you with a new understanding of the technologies which make mobile applications more interactive to user. How applications can manage data and user information enables new levels of  enagement with content. An understanding of these technologies will inform your decisions when designing a mobile application based on user engagement.



Read 1: Defintion Of API’s Webopedia
This web based dictionary provides a thorough definition of  what API’s are and how they connect different types of technologies with code in the backend of applications. Be sure read the section “Popular API Examples” near the bottom of the page. This list contains many current API’s which are available for mobile applications such as Google Maps API and Twitter Alert API. It is important to understand that these API’s are just the the beginning in terms of connecting technologies. API technology expands into the areas of data storage,notifications and geolocation tools for mobile applications.
Read 2: API Architectures For Etail By:Michael Gardener
This reading from an business named Apigee  highlights the use of API’s in the creation of an software architecture for an etail business. This business uses the blogging platform to share the constantly evolving API’s in the mobile marketplace. In this article it is important to focus on the “2 Tier API Structure”, “Consumption API’s” and the chart of the “Backend Resources”. This reading will provide you with a sample of how API’s are currently being used together in an architecture to provide consumers an easier online shopping experience. There is a deep consideration of the users experience and how the API’s tie the consumers login information and the backend ecommerce and data collection together.
Read: Open Source API Library APigee Blog
This open source(freely available) list of API’s source code will introduce you to a wide variety of API’s and how they can be integrated into a variety of user centered approaches to application design and development. Scroll through the available codes and read the descriptions. Each one will serve a different purpose for connecting users with data types. Consider these as you develop your mobile application idea. Which ones do you feel will create user engagement with your application idea?
Notice that the codes provided include Android(Java),IOS(Objective-C),Javascript (JS) and API links which can be used with a variety of types of apps(Native,Hybrid and Web). Scan these API’s and consider how they can be used in you project?
Assignment: Short Answer API Assignment
Create a list of 5 API’s that you could use in your current mobile application concept.
For each of the API’s create a description from your research and describe how the API can be integrated into your project.
Answer these questions to:
How does the use of these API’s change the user experience with your application?
How do API’s change the way data is moved?
(2 paragraphs each API).



Section #3: Creating A Mobile Information Architecture



In this section you be introduced to the tools used for creating an infromation architecture. At this stage of planning you need to be planning what technologies will be integrated into your application. This will require the resources provided in the previous sections API’s and a consideration of the user centered design approach. The tools and resources introduced in this section will enable you to create a plan for the architecture of the users interaction with the app and the technology in the “backend”.  (draw map of application layout)
This reading will provide a basic background in the layout of information architecture projects. Read in detail the areas titled:
Presenting Information Architecture
Site Diagrams
In this reading pay special attention to the graphics which show the major elements of site diagrams and the differences between the “early” site diagram and the “mature” site diagram in terms of details and descriptions.
Read: Information Architecture Vocabulary By: Jesse James Garrett
Read this guide in its entirety. This guide will develop your knowlege of the symbols and conditionals which will help you create an information architecture for your mobile application idea. The quickguide link below will review each of the symbols. This guide has support guides
which outline the symbols and the relationships in information architecture’s. View the sample as a guide for seeing all the pieces moving together.
Read & Review: Relationships Cheatsheet
Read & Review: Shape Quickguide



Assignment: Creating The Mobile System Architecture
Create a drawn detailed system architecture for your current mobile application design concept. Using the style guide,vocabulary guide and shape/relationship tools draw out the movement of the user through your application. There should be a clear flow of the users engagment and experience interacting with the technology.
Be sure to address the following needs:
User movement and corresponding relationships with elements(decision points,conditionals, clusters).
API’s
Data Storage
Pages,Page stacks and files.
Consideration for flow,concurrent sets and iterative areas.
Use the sample included in Section 3 as needed to guide your process

Assignments
Section #1
1. Short Answers:
Create a list of 5 API’s that you could use in your current mobile application concept.
For each of the API’s create a description from your research and describe how the API can be integrated into your project.
Answer these questions to:
How does the use of these API’s change the user experience with your application?
How do API’s change the way data is moved?
(2 paragraphs each API).
Section #2
2. Introduction To Mobile API’s
Assignment:
Create a list of 5 API’s that you could use in your current mobile application concept.
How does the use of these API’s change the user experience with your application?
How do API’s change the way data is moved?
For each of the API’s create a description from your research and describe  how the API can be integrated into your project and assist user engagement or technology processes?(2 paragraphs each API).
Section #3
3.Assignment: Create a drawn detailed system architecture for your current mobile application design concept. Using the style guide,vocabulary guide and shape/relationship tools draw out the movement of the user through your application. There should be a clear flow of the users engagment and experience interacting with the technology.
Be sure to address the following needs:
User movement and corresponding relationships with elements(decision points,conditionals, clusters).
API’s
Data Storage
Pages,Page stacks and files.
Consideration for flow,concurrent sets and iterative areas.
Use the sample included in Section 3 as needed to guide your process



SUMMARY
In this lesson you were introduced to the importance of the “backend” of mobile applications in managing data and organizing the technology which improves user engagement with the application. This lesson also enabled you to research and report out on the evergrowing number of API’s (Application Program Interface) which enable a variety of user centered technology enagagement and data management on a variety of mobile application types(hybrid,web and native). These knowledges allowed you to conclude your learning by creating a a detailed information system architecture which allowed you to create your own anticipated user engagement with the application technologies. It is important to see how these components (system architecture,API’s and backend technologies) work together to create an experience for the user.
Please keep the following terms in mind about creating a system architecture for mobile applications:
API’s
User Flow
Backend Technology
Data Storage

User Experience Design

Instructional Technology & Andover Innovation Lab Update March 10-14 2014

This week the language lab continued to do training on using the Sanako software in the language lab. This support and training really benefits teachers who can use the software to create language immersion experiences.



I also met with Jorge Allen to refine the plan for the the world language website. The plan is to create a place for parents to more easily connect with staff and showcase the highlights of the department. I assisted Jorge with gaining access so he could post himself and see the layout.



The students in the Innovation lab have been diligently working and pulling projects together. They are in the process of  completing formative projects on the way towards their final. We are asking students in the coming week to create videos which discuss their learning process and software applications.



On wednesday I was part of a district wide meeting of program advisors and district leadership to meet with Jim Stanton from EDC who is part of a grant to help provide training to computer science educators to implement a course called “Exploring Computer Science” in the coming year. The training willl be taking place at Microsoft and Google in Cambridge,Massachusetts this summer. Participation in this program will provide a great backbone for implementing a computer science program at Andover High School  with a cross curriculum approach.



At this point in the school year teachers fluency has improved with the use of the laptops and also with using some of the hardware such as Epsom Projectors and Interactive boards. 
The use of web based group tools are on the rise as well as teachers are moving towards organizing their communication with students and parents in central platforms. Many teachers are currently part of a pilot of using  Google Apps. The pilot will expand in the coming months and training for Google tools will expand as well.

Mobile Application Curriculum: Intro to Mobile Development Platforms

Introducing students to the variety of common mobile development platforms is a great place to start with mobile development curriculum. The differences between these platforms and the available technology varies with the design approaches for each platform. It is beneficial to introduce students to:

1.Examining different mobile development platforms and their interfaces (Android,iPhone,Windows) and defining the differences between them.
2. Review differences in device technology and technology capability as it relates to the visual and technical design of a mobile application.
3. Review and understand the current design standards for iPhone and Android(includes icon design, design resolution and interface).
4. Define different design approaches for different mobile platforms. Explain strategies used to have the application work across platforms.
I have provided a list of resources and descriptions of how they can connect with developing students understanding of the Android and iOS platforms. Use these as starting points for class discussions and
strategy development. The links below can provide an outline for instruction.

Review of Android & iOS Developer Guidelines
Review the contents of the iOS and Android Development guidelines.These guidelines have been prepared to assist developers with making apps that the marketplaces can support and also are user friendly to the consumer. These documents can be quite deep but it is important to notice how specifically they are written and how their details can influence the successful deployment of an application or additional phases of debugging.



Platform Design Standards
After reviewing the design guidelines for Android and iOS you should be able to clearly identify the major differences between these platforms. During this part of the instruction the discussion/review of the reading can be done individually or used as a basis of discussion. Students should be able to identify major differences in how these two platforms are approached differently from a design perspective.  This looks like notes to the teacher, not instruction to the student.



Differences Between Android & iOS Hardware/Software
In addition to design standards, what are the described differences in hardware, software or operating system you see defined in the design guidelines of these two platforms? You should clearly identify known operating systems or device based hardware. You may also infer knowledge of current operating systems on specific devices.

Common Strategies For Cross Platform Design
Research using search engines(Google,Bing) the alternatives to creating apps for iOS or Android. Use the questions to guide the search.
  • What other opportunities for app marketplaces are there?
  • Can students find a current breakdown of the market share for different types of mobile application development?
  • Who are the contenders?
  • What does the market share breakdown tell us about the choice of development tools or platforms?


Students will ideally be able to differentiate between platforms and define the technology behind them.

These questions can help identify learning objectives.

1.Define three major differences between Android and iOS applications.
2. What is an alternative to developing for Android or iOS? What is a challenge to this alternative?
3. Which platform has an operating system which is open-source (free to upgrade and download)?



SUMMARY
Understanding the variety of layouts and possible user experiences which are available in the two largest development platforms (Android and iOS) will help students understand the design possibilities. In this lesson students should begin to see the wide world of mobile application development. The goal is to introduce to students the current guidelines for application development for the two major platforms and differentiate the needs of each platform in terms of design.  Based on the knowledge gained from guided discussion and research on mobile platforms students should also better understand the larger context of the mobile development market.

Sample Assignments



1. Short Essay: After reading the Android and Apple Design standards, define the major differences between the Android and iPhone platforms. What do the design standards tell you about technology required and used to create mobile applications? Was there something that was unexpected in these documents? If yes, what, and why were you not expecting it?How would you use these documents to assist you in creating a mobile application for either platform? Which platform do you prefer and why?
2. Case study research and presentation. Research a mobile application using internet search engines which has had multiple design issues related to being placed on different app markets. What were the issues? How were they resolved? What strategies were used to resolve the issues between platforms? What can be learned and applied to your own possible mobile design? Make a visual presentation using Powerpoint, Prezi or other slide-based presentation tool representing your answers to these questions.

Mobile Application Curriculum Approaches: Defining The Differences Between Web and Native Apps

When the discussion of Mobile development projects begin a critical perspective on the differences between Mobile web and Native applications. Currently, most students of mine consider native applications the main goal of their development. This is the application which is downloaded directly from a app store or library and placed on a device and developed using programming languages such as Java or Objective-C. 

A web application can be a application which is viewed in a web browser like a web page but could be developed using a variety of languages such as HTML5,CSS,Javascript  or Jquery libraries. I have collected the resources below to help translate the benefits and weaknesses of each. I have also listed resoures which connect the development process to the marketing strategies linked with each. 
Use these to guide your own teaching or development process.

Critical Questions Before Exploring:



What are the differences between web and native applications?



What are  key issues in marketing strategies for Web versus Native Applications?



How can you compose a device specific marketing strategy for a mobile application?

Section 1.: How Are Web & Native Applications Different



Step 1.
This document outlines in clear language the difference in Web and Native Applications as well as other hybrid development. Use this reading to understand these differences and begin to envision which strategy may be best for your strategy.



Step 2.
Read: Web Vs. Native  
This document provides the overview of the market of native applications and the continuing development of web applications and resources becoming more available for creating applications. This article also outlines the continuing development towards creating a consistent user interface between application types. On page 52 a
clear graphic expresses the variety of different devices which challenge developers to create consistency and positive user experience across devices.



Step 3.
This source provides the list of current web based resources for web applications. This list has been created by the W3C(WorldWideWEb Consortium) to inform those who are interest in web based applications of the available API’s (Application Programming Interface) for the web. This source can be used to assist you in strateging your approach when choosing technology for your application strategy.



The provided resource describes a research project which revealed a misunderstanding amongst developers that many of the available API’s for mobile
development are solely for native applications. This is an important component for your strategy as you need to provide technology which works with your device strategy and application plan and provides a counter opinion on the wide availability of web based API’s.



Part II: Market Strategies For Web & Native Applications



Case Study Research:
The case study provided provides not only a description of a mobile project but it also describe the landscape of mobile application development. It provides the introductory context of development and also the choices and options for the team for choosing between web based applications and native.  The inclusion of best practices,user interaction and the conclusions drawn by the researchers about the mobile web applications make this a beneficial reference for those who look toward spearheding their own project.



Part III: Developing A Device Strategy





The reading titled “The Device Agnostic Approach” provides a perspective of the design of applications which is web dependant not so much for the sake of using one tool over the other but for the sake of taking advantage of the web without thinking about being device dependant. This artice can help you envision a project for a variety of devices by focusing on the web.





Starting on page 20 a breakdown of some of the current market perspective and language related to web applications and native applications is described. This chapter of a larger resource provides a real world and relevant context for evaluating the impact of choosing platforms and technology to integrate into  project.



Using the presentation introduced in earlier lessons go to slide 182 and review the area which breaks down in visual form the basics of web and native applications. Use the central questions from the presentation(provided below to help envision your strategy). These questions can be answered with the answering of your third assignment question which asks you to create a device strategy for yout idea and consider screen sizes and resoultions.
It is important to consider the variety of devices and concepts when designing the information architecture.  Designing for the future of how the application will be used provides the most benefits for the user and business which developed over the long term.



After considering the device and platform  the user will be using consider how the graphics will be managed on your device. Use your knowledge from the information architecture layout to consider what images will be shown and how large they will be rendered on the chosen device. It is important to have a device in mind and determine how large the images will be shown on each specific screen.



Important questions to guide learning about the differences in web and native applications.

1.How will different sizes be managed in the design?
2.What is your device strategy?
3.Do you plan on developing for multiple devices?

4.How will this step translate in your design?

Instructional Technology Update & Highlights From Andover Innovation Lab Week Of February 24-February 28th, 2014

The state of teachers engaging in new projects with technology at
Andover High School!

On Monday, the help desk received some older laptops
to assist with projects for blogs, web development and using Google tools.
Myself and the Lab Coordinator Zachary Griffin worked with Social Studies staff
during their department meeting time to add links of resources, images and
presentations which were organized according to different courses. The staff
did a great job at learning how the technology worked and could immediately
benefit from sharing between course and curriculums.
Teachers have been very open about making regular appointments
with me to learn more about Google Drive, Forms and Google Groups. The teachers
are fine tuning their knowledge with Wikispaces and using hardware such as
scanners and their interactive boards. I have spent the past week working with
5 teachers beyond the Social Studies department with improving their skill base
with Wikispaces to enhance in their classroom web space.

On Tuesday I met with Dr. Allen from the World
Languages department and we circulated ideas surrounding the creation of a
website for the World language department at the high school. The page would
focus on sharing the focus of the program at the high school and also
spotlighting its great faculty. Myself and the help desk will provide the
layout and we will work to get them started.

Paula Westmacott a Special Education teacher at the high school
dove into learning more about using her interactive board when she with me on
Wednesday. I was able to walk her through step by step related to the Epsom
Interactive hardware, software and pens. She will be mainly using a series of
websites and documents with the interactive board. She is excited to integrate
this knowledge into her SMART goals as an educator and use it in a variety of
collaborative classroom activities.


Additionally, I was able to assist Physical Education teacher
Carol Martini with the creation of a portion of her slide show for her “Warrior
Way” program she will be presenting to students over the coming weeks. She made
a great slideshow using her iPhoto tools and I worked with he in iMovie to add
2 different songs over the photos. She then embedded this video into her
presentation.

Health teacher Holly Breen is using the sharing options within
Google Drive to

enable students to share work more efficiently and return feedback
to students
faster. She has also adopted the Chrome Browser for the use of
Youtube resources in the classroom as well. 
On Thursday I was able to attend a training based in the
development of an advisory program at Andover High School. We read a variety of
interesting and intellectually stimulating articles surrounding the development
of students emotional and intellectual well being. We were also able to
thoughtfully consider what a program the High School would look like and who it
may serve. I look forward to being part of this process moving forward.


Also on Thursday, a great article featuring the Andover Innovation
Lab & Help Desk was published in the Andover Townsman. Dustin Luca included
great photos from students projects at the help desk and highlighted some of
the benefits we bring to the school.
Here is the link:
To close the week I finished the final draft for a potential grant
from the AEA for some Google Chromebooks for the Innovation Lab/Help Desk. Here
is a link describing more about what this web based laptop has to offer
students.
We hope to integrate tools like these at the help
desk moving forward and provide a model of success related to technology
integration.