Going Further into the Details4:44 with Hope Armstrong
The interactive state is a moment when a user engages with a UI.
The five states cover the main scenarios in a UI. 0:00 A state that occurs across most of these states, but 0:04 the loading state being a possible exception is the interactive state. 0:08 This is when the user engages with the UI, 0:13 whether it's a hover, click, focus state, and so on. 0:18 Check out these examples and the material design documentation. 0:23 For the purposes of this workshop, I won't go into the details of interaction design, 0:28 but if you'd like to learn more, check out the links in the teachers notes. 0:33 You'll also want to design for dynamically generated content. 0:37 While you'll likely be using static content, such as text and images in 0:41 your mock up, when the app is in use, it will need to accommodate dynamic content. 0:46 This content can be text, images and 0:52 data that are generated by the system or submitted by the user. 0:55 That opens up the door to a wide variety of content. 1:00 And that's why it's important to use actual text, images and 1:04 data wherever possible. 1:08 If you handcraft the text in a paragraph to always fit perfectly in two lines, 1:11 then the layout may break when a user inputs a lengthy paragraph 1:16 that spans more than two lines. 1:20 Here, I have a card that summarizes the trips in a given County. 1:22 There's only so much room on the card, so I've kept the description at three lines. 1:26 Any text beyond that gets clipped, and a "..." appears to show it continues. 1:32 The user can click to open the county page 1:38 if they'd like to continue reading the description. 1:41 In addition to too much text, you'll also want to account for 1:44 short text and no text at all. 1:47 Also, plan for different images. 1:49 Perhaps the user hasn't added any images for their visit to a county. 1:53 In that case, I could design a fallback image. 1:57 It could be an illustration, an image served dynamically from the app's database 2:01 of county images, or no image at all. 2:06 Another factor to consider is the aspect ratio of the image. 2:10 In my design, I have the trip photo set to be full width, with the top and 2:13 bottom cropped if the image exceeds the height. 2:18 That will result in some parts of the image not being visible, 2:21 which is fine with me in this design. 2:25 The image is really just for providing a glimpse into the gallery. 2:28 But let's say I want to use a trip image on the County page. 2:32 Let's say I want the Hero image to be the main focal point, 2:36 spinning the width at the page. 2:39 Since the photo is more prominent, I want to be sure it appears fully. 2:42 This is a challenge due to its wide width and short height. 2:46 From the available trip images, I could ask the developer to add logic 2:50 to select an image with a horizontal orientation. 2:55 But what if one isn't available, and only a vertical image is available? 2:59 Let's see how it will look full width. 3:04 Okay, that's not great, we're just seeing the tip of her head. 3:07 How about if we display it as full height? 3:12 Okay, now there's some white space on the left and right. 3:17 One technique is to apply the image the background and blur it. 3:21 Okay, now that's filling the space but it looks too busy. 3:26 I'll add a semi translucent black rectangle to tone down the background, so 3:31 the center image stands out. 3:36 What do you think? 3:38 This would be a good option for vertical images, and 3:40 otherwise, horizontal images can appear full width, great. 3:43 Now that we have that taken care of, 3:48 let's talk about displaying text over a provided image. 3:50 Make sure there's an overlay to provide enough contrast so 3:54 that the text is legible. 3:57 In my app, I overlay a count of images. 4:00 I've included a gradient behind the text so the image is darkened. 4:04 This hopefully will provide enough contrast for lighter images. 4:08 Looking back at the ideal state, it works well for the few photos there, although, 4:14 I should test it with even lighter images to be sure. 4:19 Feel free to play around with it yourself. 4:22 All right, now I have quite a few states prepared for my app. 4:25 Depending on the various conditions, 4:29 I can work with a developer to serve up the appropriate user experiences. 4:31 That's a wrap for this lesson. 4:36 Up next, I'll share how I created my mock-ups so 4:38 they're set up to handle dynamic content. 4:41
You need to sign up for Treehouse in order to download course files.Sign up