App Journal

Why Apps?

Over 130 billion apps have been downloaded from the App Store alone. Why are apps so popular? Before you jump into making your own apps, stop and think about what makes apps so popular. What purpose do apps serve and what about them makes people keep wanting more?

In your app journal, make a list of five apps you use regularly or have heard about that sound interesting. Think about each one.

What made you download it in the first place?
What need does it meet?
What problem do you think it solves?
What is its purpose?

If you do not have an Apple device, feel free to discuss an Android app you might have downloaded from the Play Store to your Android phone or tablet.

Try to include five apps that are different ... not all games or messaging services.

Example: I downloaded the Purple Air app during the wildfires because it tells you when the outside air is unhealthy.

Idea Storm

Have you ever wished that there was an app for that? Now’s your chance to get all of those wishes down on paper.

Brainstorm as many ideas as you can for apps you want to make. It doesn’t have to be something new. You could have ideas about an app that already exists, but maybe you want to know how it works or how to make it better. Write down even the apps you think are impossible or just plain silly. The sky’s the limit.

This will be a list you’ll return to over and over again as you learn about developing apps. Keep it handy so you can add to it and refine it as you go.

Write down as many app ideas as you can.

A name (Bibbedy Bop) is not an app idea.

It does not need to be long and detailed. One sentence with your idea should be enough.

Example: an app that lists all the assignments due in all my classes in chronological order, so I know which one to work on next.

You should be able to type 10 to 20 ideas or more on a single page in Google Docs.

There is no set number of ideas you should come up with, but if you turn in only 3 ideas and someone else turns in 20, your grade will not be so good. So fill up a page with good short ideas.

Who’s Your Audience?

When you develop an app, it’s important to think about who will be using it. An app for kids should look and feel very different from an app for professional artists. Your job as an app developer is to understand the user and to design the app with that user in mind. You want to be sure that the user experience, or UX, is right for your audience.

Take a look at five different apps on the App Store. Be sure to check out all the different categories, like Games, Education, and Kids. Read through the descriptions and look at the screenshots.

Write down who you think each app was designed for.
What kind of person would download that app?
Do you think the app will meet their needs?

Now go back to your list of app ideas from “Idea Storm.” Identify a few key audiences you want to focus on. Answer the same questions for each of your app ideas:

Who was the app designed for?
What kind of person would download that app?
Do you think the app will meet their needs?
How can you make sure the app meets the needs of different kinds of individuals who might download it?

App Dive

You might have a great idea for an app, but it won’t be a success if your audience doesn’t understand how to use it. That’s where user interface (UI) design comes in. A well-designed UI makes for a good UX (user experience).

But what makes for a good UI? When you’re using the app, it should make sense. When you tap a button, you should know what will happen. What makes for bad UI? You’ve probably experienced apps that leave you wondering: “I know there must be a way to… but I just don’t know how to do it.”

Take a look at the design section on the Apple Developer website. It’s packed with resources, such as the Human Interface Guidelines (HIG), that can help you think about how to design apps with great UIs.

Now go back to your list of favorite apps from your app journal for Lesson 1: Why Apps? Rank them in terms of their UI design. Which apps are easy to use and seem to “just work”? Write down the reasons that some apps are easier to use than others. Compare your notes with other students. Did you agree on the reasons?

When you write down reasons why some apps have better UI design than others, make sure you reference specific items within the Apple HIG. Don't just make it up. Be specific, and make sure you've looked at the Apple HIG.

Problem Hunters

It’s time to go back to your app journal for Lesson 2: Idea Storm. Take a look at your “Idea Storm” list. Which ideas stand out to you now? This doesn’t mean you should cross off the ones that don’t. You may come back to these ideas one day with a different perspective. It’s also a list you’ll want to keep adding to.

For those standout ideas, what problem or purpose does each of them address? Can the problem or purpose really be solved with an app?

Remember, there are a lot of apps out there. For an app to stand out, it needs to be truly innovative. In the tech industry, there’s the idea of a “disruptive” technology, something that changes the way we do and think about things. Will your app be disruptive? What can your app do better than any other app?

Make sure you know what "disruptive" means. Don't just make it up as you go along. A disruptive idea is a way of thinking is is so different from the status quo that it completely changes the way an entire industry behaves. Examples of disruptive products might include the Apple iPhone and the hybrid electic automobile. After the iPhone, all mobile phones became very different, even non-Apple phones. After the hybrid automobile, all other kinds of automobiles were scrambling to catch up. These disruptive ideas changed entire industries.

Ideas Seeking Solutions

So far, you’ve been focusing on identifying problems that your app might solve. Now it’s time to turn some of those ideas into app statements, as in the example below. See if you can define your app in terms of the problem it will address. How exactly will your app fulfill its goal?

My app will: ________________(what will your app do?)

because: _________________(why does this need exist?)

Example:

App name: Where Should I Be Right Now?

Problem: Help new students get adjusted to your school.

My app will tell a new student exactly where to be right now and how to get there, because new students often get lost.

Repeat this for a few of your app ideas. Do any of your app statements speak to you more than others? Go back to your list and continue narrowing down your favorite app ideas.

Feature Smashing

Apple iOS devices, like iPhone and iPad, are equipped with a variety of important hardware features. As an app developer, you can put some of them to use in innovative ways.

Do you aspire to build state-of-the-art apps? Take some time to learn about the features and tools you might want to use, things like Handoff, HealthKit, Bluetooth, and SceneKit. You can find lots of helpful information from the Develop: Resources section of the Apple Developer website.

Below are just a few of the basic features to get you started. In your app journal, brainstorm about how you might use these features and tools in your apps. Some ways might be obvious. But push yourself to think up some totally new applications. What haven’t you seen before?

(Be aware that most Android phones also have these features, so if you aspire to write Android apps in the future, thinking about these things will still be productive for you.)

Accelerometer. iOS devices have an accelerometer that detects how the device is being moved in three-dimensional space. That means that an app can detect whether the device is accelerating, decelerating, or in zero gravity. Could you create an app that detects if the user is falling? Or measure how many times someone rotates their phone along a central axis?

GPS. iOS devices have a built-in GPS (Global Positioning System) that shows where it’s located on the earth within about 15 feet. It can also detect altitude (vertical distance from sea level). By combining data from the GPS and the accelerometer, an app can estimate the user’s velocity fairly accurately. Some iPad models don’t have GPS but can estimate their location using nearby Wi-Fi signals.

Camera. Easy access to the iOS camera allows users to take photos or video and save them to the image roll. Your apps can overlay images onto those images and then save them. Augmented reality (AR) apps can read your location and overlay images onto the live feed from the camera, combining computer-generated images and real life as you walk around.

Touchscreen. Both iPhone and iPad have a touch-sensitive screen. You can create apps that detect a user interaction, such as tapping the screen once, double-tapping, swiping, or dragging a button or object. Think of the possibilities for games and other user interfaces that use touch as a very natural interaction with elements on the screen.

Idea Storm… Again

By this point, you’ve hunted for problems far and wide. You’ve chosen certain problems that an app might be able to solve. You’ve written app statements that define what your apps will do. Now it’s time to have another idea storm. But this time, you’re going to come up with as many app features as you can. Think about the features and tools you learned about in Lesson 7: Feature Smashing and from the Apple Developer website. How many of those can you incorporate in your app and in how many different ways?

Remember, when you do an idea storm, it’s important to make a note of as many ideas as you think up. The crazier the ideas, the better. Don’t worry if something is impossible or silly, or if you wouldn’t know how to code it. Just think about how your app could be unique and how it might help to define a whole new category of apps.

Instead of thinking about app ideas, think about feature ideas that you could incorporate into your apps. This requires a different kind of thinking. A feature idea is one that you could incorporate into your app, a different app, or something that someone else could incorporate into their app. More than just a phone feature such as a camera, a feature idea is a novel way of using the camera in your app.

Try to fill a page with ideas. Again, if someone else comes up with 20 ideas and you come up with only three ideas, who should get the better grade?

Do Your Research

Now that you know the purpose of your app and the kinds of features you’ll use, take a look at what’s out there already. Take a good look at the App Store. Do your app ideas already exist? Don’t be discouraged if you find one or several that are like the app you’ve imagined. It just means you had a good idea. And maybe now that you’ve seen a bunch of similar apps, you can see ways of improving them.

For each of your app ideas:

Identify the top three competitors on the App Store.
If you can, download the app to check it out.

(If you don't have an Apple phone, try downloading a competing app from the Google Play Store. If you don't find any competition on the Apple store, try looking at the Google Play Store. You could even look for web sites that solve your app's problem. Maybe your app idea is better expressed as a web site?)
Pay attention to how easy it is to use.
Can you suggest any improvements to the user interface?
How could it be designed better?

If there are any user reviews on the App Store, be sure to read those carefully, too.

What are people finding difficult about the app?
What else do they wish it could do?
Where are people getting confused?

Make note of these comments in your app journal. How would your app address each of these concerns?

Designer Apps

We’ve been talking a lot about the design of an app. But what makes a well-designed app?

Take another look at the HIG. The HIG promotes three core principles of good interface design on Mac and iOS:

Deference. The navigation and user interface should not detract from the content of your app itself. They should be there when users need them, but should be unobtrusive.

Clarity. Text should be legible, no matter what size it is, and the overall look should be simple, not cluttered with unnecessary details.

Depth. Use motion and visual layers to clearly show the relationships between different elements on the screen. When new elements come onscreen, they can “stack” on top of each other, so when you close a view, you see the one beneath it.

In your app journal, write down a few design principles that will be important for your app. You’ll want to refer back to these principles throughout the development process, as they’ll help you stay on track and be consistent in your design.

Examples:

Keep it simple. Help focus your user’s attention. White space (the area where you don’t have anything) could be just as important as the positive space (where you put stuff).
Be consistent. Navigating through your help should feel intuitive to your user. Placing buttons and controls consistently lets them users where to find them.

Make sure you refer to specific items in the HIG as you write your ideas.

First Impressions

People form first impressions very quickly. The first few seconds that someone spends using your app are the most important. Will they move your app to their Home screen and check it regularly? Or will they close it and forget they ever downloaded it? That first impression can make all the difference.

Take yourself on an app hunt. Your goal is to find an app that demonstrates each of the following best practices for designing apps.

An appealing icon. When people are searching the App Store, they notice a good icon. Right or wrong, they’ll make a judgment about the quality of the app based on its icon. You might have a brilliantly coded app with a slick user interface, but people will never download it if your app icon looks amateurish.

Find an app that has an appealing icon. What makes it appealing?

Find three apps with icons you really like. Don't just say which icons you like, but explain why using design principles. The HIG has principles for making icons. Some things to think about: color, spacing, balance, color contrast, readability, use of text, etc.

Get right into the action. It’s not a good idea for your app to display a login screen or a big “Start” button as the initial view. Let people start using your app right away, on the first screen they see. What will most users want to do with your app? Make that the initial view. How many taps does it take to get to the main part of your app? The answer should be very few.

Find an app that gets you right into the action. What did it do to engage you?

Initial onboarding/tutorial. The experience of using an app for the first time is referred to as onboarding. To onboard new users, you might want to show all the cool things the app can do. This will help them learn how to use the app and also get them excited and interested in using it. Even for apps that ask users to create an account or to log in, you’ll want to give users an overview of the app before asking them for those details.

Find an app that provides a good onboarding experience. What did it do to explain itself or to get you excited?

Prototype

By now, you probably have a favorite app idea, one that’s really stood out for you. If none of your ideas excite you anymore, go back to your idea list and start the process over. Because now it’s time to get serious and start building an app.

In your app journal, write or sketch at least three views of what your app’s interface might look like. In particular, think about what happens in the first 10 seconds after a new user opens your app.

Draw the screens on paper using a ruler and neat lettering.

What is the first screen (view) that the user sees? Which buttons are visible? Then what happens?
Think about what kinds of graphics and icons your app will display.
How many taps will it take for users to find out what they need to know?
How would users navigate between views?
What are some simple ways to communicate the features of your app without using words?

Who’s Really Your Audience?

Now that you have an app you want to build and the initial few screens mapped out, it’s time to revisit your audience. Think about a few different kinds of people who would use your app. Write character profiles for each type of user.

What does this person do?
How old is she?
Why is she using the app?
How does she find things she needs to know?
Does she prefer pictures or words?
Does she love her device or just tolerate it?

Here are two examples of character profiles:

Anna, 15 years old. Anna is a sophomore who’s new to school. She loves to draw. Anna likes to look at maps so she can get a visual sense of where she is and can then wander around without getting lost. Anna loves apps that are simple and easy to use, because she doesn’t want to spend her day with her face in her phone. She’s afraid she’ll miss seeing all the beautiful things in the world.

Mrs. Wilson, 38 years old. Mrs. Wilson is an English teacher with a large number of students in her classes. She’d like to be able to project apps on the big screen so everyone can see them. She’s frustrated by apps with lots of details, because students in the back of the room can’t see things clearly. Her school’s connection is very slow, which prevents her from showing apps that require Internet access.

Write up at least 3 different personas for 3 different individuals who might use your app. Be sure to use different genders, ages, and occupations. Try to identify people who would actually use your app. So if your app is for children, don't include any old people. If your app is for women, don't include any men. Try to have a broad target audience but also a specific one.

Once you’ve written a few profiles, go back to your prototype sketches. How might you improve them?

NOTE: You will sometimes see character profiles referred to as personas.

Test

You have your prototype and you know your audience. Now it’s time to get feedback from real people on the views you’re designing. You’re ready for some user testing.

Redraw your latest prototype views on index cards. Each card is a view that test-users can flip through and pretend they’re using your app. Each time they “tap” a button, you switch them to the next card.

Find a few people who fit your target audience. As they go through the index cards, ask them if it’s clear what they’re supposed to do in the app. Would they know what buttons to tap? Do they like your app and think it will be useful to them?

You should test your paper prototype on at least two people. One of them may be another student in the class. At least one of them must be someone outside the class who is a member of your target audience.

Record your findings in your app journal.

Review

An essential part of the design process is to take the time to review and evaluate your work up until now. Based on your user testing, did your app seem to achieve its purpose as you thought it would? Did your users like your app?

After reviewing the feedback, it’s important to ask yourself, “Is this an app that’s worth building?” It may be tough to face the answer. But consider this a gut check. You want to be sure you’re working on something you believe in. If you still love your app, that’s great. Now how can you improve it based on your user testing? If you’re not happy with the app and its future worthiness, return to your ideas list and start the process again. You may even have new ideas based on your testing.

Evaluate your prototype app after doing user testing.

Note that you must do #14 user testing before doing this assignment.
Did your app achieve its purpose?
Did your app solve the problem intended or did it create new problems?
Did users like your app?
Is this an app that is worth building?
How could you improve your app, based on user testing?
Does user testing give you new ideas for your app?
Do you think you should switch to your second place app instead of this app?

Prototype… Again

Paper prototypes are a great way to start developing and testing your app idea. Each subsequent prototype moves you toward an interface that’s intuitive and enjoyable. However, as you get closer to a final design, it’s important to prototype on an actual device—-one that’s similar to the device you’re designing for. You can observe how your users hold the device, see what’s visible when their fingers interact with the interface, and check whether your buttons are too large or too small.

After paper prototypes, you can use the Keynote application to mock up the different views of your app. You’ll basically be simulating an iOS environment, without having to go through the behind-the-scenes coding. All you have to do is create links from the interface elements on your views, linking one Keynote slide to another. Once you’ve created enough slides and links to simulate navigation reasonably well, you can play the presentation on your target device and see how users interact with the screens.

In your journal, plan out the views you want in your Keynote prototype. Create your views in Keynote and continue to refine them. This time, in addition to thinking about how users might navigate between screens, think about the design of each element on the screens. With Keynote, you can play with the color, size, and placement of your buttons, icons, and text. Watch this video from WWDC on Iterative UI Design to learn more about designing apps and creating prototypes with Keynote.

Test…Again

Now it’s time to test your prototype again. Write down specific questions you may have about your design. Focus on the parts of your design you weren’t sure about. Maybe a user’ s opinion would help guide you. Did a particular button make sense to them? Was the text legible? Did they like the colors of the images?

This time around, you may want to just observe how your users interact with your prototype before asking them questions. Hand them your Keynote prototype and ask them to go through the app just as they normally do when they try a new app. You won’t always be there to guide a user, so observing what they do on their own is important and will help you create a design that anticipates what users might do. Write down in your journal any observations you have, such as where they got confused or where they seemed to really enjoy something.

Review…Again

If you haven’t noticed, the design process is cyclical. To create the best product possible, it’s important to design, get feedback, review, and revise at multiple points in the development process. How did the user testing go this time? Did you notice a better response to the features you revised? How did users react to the new elements? What still needs to be improved? Are you still excited about building this app?

Designing for All Users

iOS supports multiple ways of accessing onscreen content. People with physical impairments can use Siri or Dictation to interact with apps. People with visual impairments can increase the size and contrast of screen elements or use the VoiceOver screen reader. But iOS accessibility features aren’t just useful for users with disabilities. They help all users access your app in whatever ways that are comfortable for them.

As a designer and developer, you need to understand how to build accessibility into every app you design. This is important for a number of reasons. First, you’ve worked hard on designing and building your app, and you want your work to be experienced by the widest range of people in the widest range of situations. For example, if you support VoiceOver, your users can navigate your app entirely by sound in situations when they can’t look at the screen. Next, it’s important for your app to stay current with the accessibility guidelines that many governing bodies are adopting. Finally, supporting the needs of all users is the right thing to do.

Read this page from the HIG about Inclusive Design.

Read this page from the HIG about Accessibility.

Watch this video from WWDC to learn more about Inclusive App Design. Try out the iOS accessibility features so you know firsthand how they work. In your journal, write down ideas for how you can incorporate some of these features into your app.

Here are other videos about Acccessibility.

Make sure you read the HIG and watch the video(s) about Accessibility and don't just make something up.

More Than Just an App

Continue to prototype, test, review, and revise.

As you near the completion of your design, think back to Lesson 11: First Impressions. You want to be sure you’ve created an app that people will download and remember. In this journal activity, focus on the title and the app icon, since those are the first things a user will see.

Go back through your app journal and read through your brainstorming sections. Look at the ideas you generated. Pay close attention to keywords or phrases, and think about what visuals suggest those ideas. Draw or sketch three or four visuals that represent the key ideas and features of your app. Do the keywords and phrases make sense in a title?

Don’t forget to test. Keep drawing out visual ideas and show them to different people. Ask lots of questions.

Which of these icons best express the idea? When you see this visual, what do you think of? What does this title mean to you? What do you think this app is about?