CIS 136 Building Mobile Apps Building Apps CIS 136 Building Mobile Apps

Building Apps Concept

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?

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

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?

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

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

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

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

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

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

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

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

User Story Example As a user of the Been There, Done That app, I can login to the app using my email 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.

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

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

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

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

Navigation Patterns

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

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

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

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

Primary Navigation Cards Stack, shuffle, discard, flip

Primary Navigation Cards Stack, shuffle, discard, flip

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

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

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

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

Page View specifications

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.

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

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

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

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

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 Email address Password DOB Gender A Back button

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

Designing the App

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?

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 (http://balsamiq.com/). A pad of post-it notes Start thinking about the UI components to use for the framework you are using

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

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

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?

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

Developing the App

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