Introduction to tvOS Part 3: UI/UX

* Please note that you must have completed parts I and II to follow along with this post.

In this third and final part of this tutorial series we are going to learn about user interface (UI) and user experience (UX) design. The wrong interface can ruin a perfectly good application idea. To determine the correct interface for a given application it is best to start with a user experience review. This consists of a lot of research on the target audience as well as on the competition. Once the audience values are determined we can begin to construct a basic UI. In this tutorial we are going to do a very minor UX review and then begin adding to our interface.

User Experience Review

People that practice UX/UI are:

  • User Researchers
  • Content Strategist
  • Information Architect
  • Interaction Designer
  • Visual Designer
  • Developer

I took a course on User Experience Design about a year ago and something my instructor said stood out to me, “Design can be described as how the whole system works.” When you look at design through that lens you realize that it affects every aspect of your application.

Creating Incentives

Note: Here are Apples Human Interface Guidelines for Apple TV https://developer.apple.com/tvos/human-interface-guidelines/

For our application, we have a few minor things that we can add that will greatly improve the quiz experience. Lets take a peak at our current interface.

10-aTVSim1

We have given the user the most basic information for application to function, the question and the potential answers. We need to give our user an incentive to play our game. To do this we will add a score. First add a label to the top right of your storyboard and then add a variable to keep track of the score at the top of your view controller.

var userScore = 0

Then add a property and connect it to your label

Screen Shot 2016-05-22 at 7.16.43 PM

Once you have wired up that property paste this viewWillAppear method below your view did load.


override func viewWillAppear(animated: Bool) {
userScore = 0
questionScoreLabel.text = "Score: \(userScore) "
}

Now, we have to pick a set of rules. For our game we will give the user 10 points if they get the correct answer and subtract 5 if they get the wrong answer. To do this we need to add a few lines of code in every place that we evaluate the user’s answer.

Add this line in our choice pressed method inside the ‘’correct’’ answer alert just above self.next question.

self.userScore += 10

Then, in the same method place this line above the self.nextquestion in our “wrong answer” alert.

self.userScore -= 5

Now we will need to calculate the score for our “game over’ alert. Go to the nextQuestion method and modify the alert message to include the score in the alert message. Then add self.userscore = 0 above self.nextquestion. This is the score reset action

Lastly add

questionScoreLabel.text = "Score: \(userScore) "

To the bottom of your next question method. Now run the application. You should see the user’s score updating as you answer questions.

Simulator Screen Shot May 22, 2016, 7.24.46 PM

Now we have a proper score and we have given users an incentive to play our game.

Creating Context

We now have a quiz game that keeps score and asks multiple questions. What we are missing is a way for the user to know where they are in the game. Giving a user context is extremely important. We need to let the user know how many questions are left for them to answer as well as how many questions they have answered so far. That allows the user to not feel as if they are in an endless game. To do this add a label to the top left of the screen and then add a corresponding property called questionNumberLabel and wire them up.

Screen Shot 2016-05-22 at 7.29.52 PM

Fortunately in part II of this tutorial we created a variable called questionCounter. Because of this we only have to add one line to the top of our nextQuestion method

questionNumberLabel.text = "Q: \(questionCounter + 1)/\(questionArray.count)"

Now run the application.

Congratulations, you have now given the user an incentive to use your app and given them some context about their progress which will keep them playing!

Conclusion

There are many aspects to user experience and we clearly only scratched the surface. The goal here, is to improve the experience for the user and we have done that just by adding a few labels. Please go on and add color to the buttons, change the fonts, get creative. While there are some paradigms in design that should not be broken, the Apple TV is so new that no one is 100% sure what works and what doesn’t. Experiment with new layouts and always remember to put yourself in your audience’s shoes when making UI decisions. With all of that in mind you will no doubt create a usable and unique interface.

 

-Miles