1. CIS 136 Building Mobile Apps
Building Apps
CIS 136 Building Mobile Apps

2. Building Apps
Concept

3. Defining your first mobile application
The goal of any piece of software is to meet a need
Google met a need by providing cloud storage so users could access their files from any computing device anywhere and share them with other people
Word met a need by allowing users to maintain documents in digital format rather than typewriters
What goal does Facebook meet?

4. Plight of the Programmer
the hardest thing for a developer to do is to not develop
There is something that happens when you jump right into code:
You fixate on minutiae like spacing, margins, colors, logo size, etc.
Using pencil and paper has its benefits:
A drawing takes only a few minutes to sketch
It uses a different part of our brain and unlocks our creative centers
All ideas can be contributed without having to know how to code them
More attention is paid to the ideas
You will most likely end up with a great user-centered design

5. Scope and Function
When building software, it's a good idea to spend time up front writing out a specification for your project:
what it will do, what it will look like, and what it should have
If you don't know what you're building, how will you ever know if it's done?
sort of a letdown, huh? we've got to start somewhere, right?

6. Pre-Development Q&A Been There, Done That
Question
Answer
What is the app called?
Who will use the app?
Why will they use the app?
What are the key features of the app?
Been There, Done That
Anyone, but probably people over the age of 10
To play Trivia Games
The ability to select trivia categories and try to obtain a higher score than other players

7. Pre-Development Q&A
Question
Answer
What technologies are required to implement the apps’ features
a database on the device and on some web server somewhere, probably some user tracking
The camera feature of the device

8. Outcome of Q&A Design ideas and details Scope creep Icons to use
Color scheme
Platforms to target
Scope creep
Deciding midway to add features
Add more page views
Take video
Add data fields
A place to start

9. MVP Minimum viable product
Approach development with an eye on iteration
Develop critical pieces
Develop necessary functions
Defines the “blurry” line between a timely, cost-effective release vs. a release catering to desired audience that is a money pit and overly complex

10. Handling scope creep Less moving parts
Speed through development faster with a more “lean” first version
Less time needed to produce the app
Gauge overall interest in the app

11. Don’t toss in the towel Create a “parking lot”
A place to save the great ideas for the next version
Include elements that come to mind for marketing, sales, etc.
Plan for the “next big feature”
Calendarize the next big offering

12. User Stories Helpful to understand the user experience
What the user will hear, see, do while interacting with the app
Won’t overlook key features
Describe who is doing what, and what the result is
Single sentences that dictate a small aspect of the intended functionality

13. Close your eyes and get a visual of the following app
I am going to read you a user story

14. User Story Example
As a user of the Been There, Done That app, I can login to the app using my address and a password. Once logged in I can choose a trivia category. When I pick one, I can see menu of choices. One choice is to start the game, Another choice is to see the standings, another choice is to get help . If I click on Start the Game, the first Trivia Question is displayed. After I answer the final trivia question, I get to see my results.

15. Document..document..document
As you go through the whole development cycle, write the details down on paper in a professional looking design document
Cover Page
includes the Release Name you will give your app, and your name as the app creator
Overview
a high level description of what the app will do, who will use it and why they will use it
App Walkthrough
insert your user story
Wireframes
include a sketch of each page view to document the idea of what you want the app to look like. Give each page view a name, so that it can be identified in later steps
Page View Flow
sketch a picture of the navigation between page views
Native Features
include a bulleted list denoting the native feature and the page view it is included in

16. Requirements for the “Been There, Done That” Trivia App

17. Listing out the requirements for the Been There, Done That Trivia App 1. Define the goal
GOAL: Meets a need by allowing a user to test their knowledge and have some fun playing a game
Accomplishing the goal:
The problem is that there are so many ways for the app to accomplish the goal
The easiest approach is to simply write those things out in a list
By breaking each part down into smaller pieces, its easier to understand, and to see just what we need to make it work
trim down the features to the bare minimum
Not too much, not too little

18. Listing out the requirements for the Been There, Done That Trivia App 2. Define what it should do to accomplish the goal
What should the application do ?
The Trivia app will ask questions and take responses on a variety of topics
With Trivia, it will do the following things :
Choose a topic
Display a list of questions and score responses
Provide game rules
Provide scores
Settings user can adjust
Provide help

19. Navigation Patterns

20. Navigation App ratings 4-5 star reviews 1-2 star reviews Great app
Works well and looks good
1-2 star reviews
Offer truer picture
Most common complaints
Crashing
Lack of features (syncing, filtering, linking)
Confusing interface design
Poor navigation
Can’t go back and find things
Design patterns can fix the last two
Good navigation is invisible

21. Information Architecture Navigation Blueprint for Pages/Page Views 3
Information Architecture Navigation Blueprint for Pages/Page Views 3. Draw the pages/ page views
Choose Topic
Game Menu
Play Game
Rules
Settings
Help
Scores

22. Primary Navigation Persistent Transient
Navigating from one primary category to another
List Menu or Tab Menu
Transient
Revealed through tap or gesture
Due to sizes of smartphone screens
Create side-drawer navigation pattern
If menu needs to be present, use Persistent

23. Primary Navigation Springboard
Landing screen with options that act as launch points

24. Primary Navigation
Cards
Stack, shuffle, discard, flip

25. Primary Navigation
Cards
Stack, shuffle, discard, flip

26. Primary Navigation List Menu Show topics hierarchically
One choice per screen until the destination is reached

27. Primary Navigation Dashboard Snapshot of most relevant info
Similar to Springboard and List Menu

28. Primary Navigation Gallery
Displays live content arranged in a grid or carousel

29. Primary Navigation Tab Similar to Springboard and List Menu
Content opens on own tab

30. Page View specifications

31. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Choosing Topics page view in the Been There, Done That Trivia App
The needs of the “main” page view:
A title: Show the name of the app “Been There, Done That”
Topics: The topic will be displayed using small graphic images which are clear enough so the user knows what the graphic represents (I.E. a Movie icon/image for Trivia questions about movies). Once a topic is selected, the game menu display
Release version: The version of the app and the company name. Have a fixed footer.

32. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Menu function in the Been There, Done That Trivia App
The page view needs:
A Title: Show the name of the app “Been There, Done That”
A background image: that correlates to the topic they have selected
Listview
These rows should be a links to various app functions
, Play game, view scores, rules, settings, and help

33. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Play Game page
The page view needs:
A label for the title
A series of yes/no questions
Ability to handle input and keep score
Transition to scores page when finished

34. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Rule page
The page view needs:
A label for the title
A paragraph containing rules
A Back button

35. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Scores page
The page view needs:
A label for the title
A navigation bar to see top player scores, or latest scores of user
A Back button

36. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Settings page
The page view needs:
A label for the title
A form container for the user to enter/change their account:
Nickname
address
Password
DOB
Gender
A Back button

37. Page/Page view specifications 4
Page/Page view specifications 4. List requirements for each page view: Help page
The page view needs:
A label for the title
A paragraph containing help text
A Back button

38. Designing the App

39. Design Activities Build the Wireframes Determining page view flow
begin imagining how to arrange UI elements to allow users to navigate your app
easiest and fastest way to get started is to sketch out your screens by hand using paper and pencils
Determining page view flow
Does where the user can go make sense?

40. Wireframes
Sketch each piece so that you get an idea of what you want each page view to look like
Don't worry if can't draw a stick figure
You just need to be able to draw some boxes and text labels
Use free or inexpensive tools
A popular wireframing tool that runs in the browser is Balsamiq Mockups (
A pad of post-it notes
Start thinking about the UI components to use for the framework you are using

41. Designing the “Choose Topic” wireframe
Needs a title, topic images, and company/software version

42. Designing the “Menu” wireframe
The listview is an integral part of mobile development
It's the simplest way to group similar items together, plus, it offers lots of extra functionality:
Scrolling
built-in images for links

43. Designing the “Settings” wireframe
Player must denote the settings
Form container used to group form controls and transmit data to web server
Once you start seeing things laid out, you'll find that you've forgotten something really important (such as being able to submit the form)
And..where is that data going to be saved?

44. Determining Screen Flow
A picture of the navigation for the “Play Game” to “Scores” page views
WHAT IS MISSING?

45. Developing the App

46. Beginning Development
Once the wireframes are done and we're happy with them, it's time to get technical
Single page with multiple page views? or Multiple pages?
Images – from where, size, dimensions
Icons
Build and test
Deploy