Category: Uncategorized

After reading iOS Human Interface Guidelines and the Android Design Guidelines, I easily understood the basics of UI design Knowledge.

The first thing that cracks me up is this startup screen for the Calculator. It is true that traditionally graphic designer and app developers love to put a startup screen in the applications. It is almost a standard practice – perhaps adapted from early video games. Unlike loading view (launch image), which reduces the anxiety to wait for the application to load, startup screen barely does anything (except to allow the users to login).

Another note I took is to inform users “about the situation and explain what they can do about it.” I often like to leave out views in my apps when in the progress of development. I feel it would be nice to add these “unavailable features” to the alpha apps even though it will take up more development time. In exchange of the development time, I could present the app to the test users without raising some negative confusions.

I never thought the most important element is on the top-left of the screen. I thought it is on the center of the screen. This is something I feel people can debate about…

The first thing that interests me is the narrative flow behind the usage of the navigation bar, view, navigation controller and the window. Here those UI elements are not considered in a linear way but as the idea of layers. However the UI is presented by combining the views and the view controllers. So designers or developers are thinking about the views and view controllers, users experience the collection of screens in a flat and simply way. This interests me that designers should think about both the way logically and the way users will think about. Also this reminds me of the idea of designing the desktop of the mac, for example, the trash can on our laptop screen. Designers spend long time to make the trash can “stand” on our flat screen. Those things are really about the user experience design, and it gives me a new way to think about how designers present or express their ideas for users.

The second thing that interest me is the idea of leaving plenty of negative space. I think this is also related to the idea I mentioned above. Usually developers tend to provide more and more information to users. In that way, the information bomb makes the users feel bad. Although the negative space rule is obvious, it’s easier for designers to forget. What’s more, the idea of negative space seems to be from Chinese painting. It’s related to the aesthetics. So it also interests me how it applies to the UI design.

1. Branding: I found the section about branding particularly interesting because of how such a simple difference could make a big difference in user experience. The guideline presents a comparison between recommended and not recommended designs. It was funny to see how the logo and advertisement shout for attention in the “not recommended” example, and I could clearly see how one was much less visually pleasing to look at. I am an Android user, and I feel like I see this “not recommended” version a lot in my Android apps (especially in the apps that exist for Android only). I have an iPad as well so I often compare apps between iOS and Android. Now that I think about it, it seems like apps on my iPad tend to have far less obtrusive branding and advertisements, compared to apps on my Android phone. A lot of apps on my phone have visually annoying logos and banners everywhere. When it comes to apps that are for both Android and iOS, however, they tend to be more well-designed in terms of user experience. I don’t know the exact reason for these differences between iOS and Android apps. It might just be a coincidence, and perhaps the apps that I install on my phone happen to be the poorly designed ones. Or could there be other reasons?

2. Interactivity and Feedback: It was interesting to see all the standard gestures laid out in one place. I thought it was quite amazing to realize how natural most of these gestures have come to feel. The part about avoiding making up new gestures for productivity apps (in contrast to how new gestures could be an element of fun in game apps) was interesting too. It made me realize how gestures could bring different effects to the users depending on the main purpose of the app.

3. Terminology and Wording: I particularly appreciated the phrase “Every word you display in an app is part of a conversation you have with users.” I thought it was a really nice way to think about text in apps, and made me think of the word “empathy.” Also, the part about considering user’s locale was helpful. It is obvious that there are smartphone users all over the world, but I don’t think I ever thought about it in the context of app design. It was a good reminder for me to be aware of the diversity of users, not just culturally but also geographically. This section also mentions how important the App Store description is in communicating with potential users. When I look back, though, I rarely pay attention to the app descriptions when I’m searching for new apps. My habit is to jump directly to user reviews, and if I find the app interesting, then check if it offers in-app purchases. I’m curious if this is just me or if other users do the same.

Overall, the guideline was informative and it made app design seem like a breeze, even though I am fully aware that is not true. In any case, the guideline helped me think of UI elements that I wasn’t aware of before. It was also fun to look at the visual examples think about the recent graphic trends.

enlightened:

After reading “iOS Human Interface Guidelines,” and working on the group project, I realized again the legibility with mobile screen is important to design an app. The smallest size is 22 pts and the largest size is 34pts. I applied this rules into the app design.

confused:

Designing for iOS 7: “Let color simplify the UI”

In this IOS7, they changed it to flat look design and it looks clean and simple but somehow, these look cold and businesslike.

surprised

With IOS layout, I thought easy to focus by user is center. But, the important contents are placing in the half of the screen and left side.

Team: Tingjian (Carrol) Shen, Yang Wang, and Seungkyun Lee

The name of our app is “Slurp.” It is a noodle recipe + eating company app for the iPad.

In terms of the recipe feature, we decided it would be useful because we assumed single people in their 20-30s wouldn’t be very good at cooking. Noodles are relatively easy dishes to cook, so we thought target users would like to see the recipes.

The other feature of the app, which is the eating company feature, is the twisted side of our concept. We assumed single people would eat alone most of the time. In order to help with the loneliness, we decided to include the option to have a celebrity/movie or TV character show up on the screen to accompany the users while they eat.

In terms of interaction, we imagined using voice command. The part where the user needs to slurp near the microphone is to play with the idea of noodles. Voice command also comes in when the user moves forward or backward through the different stages of the recipes. There are buttons on the screen, but we thought the user wouldn’t really want to touch the screen with their hands while cooking, so we thought the voice command would be useful.

Wireframe:

Icon:

Mockup:

These are some of the screens that the user could be eating with.

Bonus: JB eating noodles with you!!

At the very first time when mobile market became universal, users had difficulties to see details on the screen because UI was only designed for laptop size. Now even web designs, which are mainly used with computer, prepare their own mobile version of them so that users can experience mobile apps more comfortable.

After reading “iOS Human Interface Guidelines,” I could know basic knowledge of UI design how to arrange menu, icons, and text. All the design are carefully placed on the screen with consideration of human sense like which color might be able to be noticed more quickly or more naturally.  I think because mobile has a limit of size, designers should more carefully concern which icon should go where, which color should be there and so on.  Also, in the reading, there were some facts that I haven’t thought for designing UI. For example, I haven’t thought about color blindness can occur problem of using application. The author presents how to consider human sensibility to design application. Though the reading, in conclusion, UI is based on human sense and needed more study about human to design it properly.

1. One thing that surprised me was just how true and simple a lot of the reasonings for the designs were. For instance, “Negative space makes important content and functionality more noticeable and easier to understand. Negative space can also impart a sense of calm and tranquility, and it can make an app look more focused and efficient,” or how important the ‘Back’ functionality is “so users know exactly where they are, where they came from, and how to get back.” There were a lot of things that I found to be very to my own use of the iOS Interface, yet they were things that went unnoticed until I read about them.

2. I was also pretty enlightened:

I’ll be sure to use Dynamic Type – “Ensure legibility by using the system fonts. iOS 7 system fonts automatically adjust letter spacing and line height so that text is easy to read and looks great at every size. Whether you use system or custom fonts, be sure to adopt Dynamic Type so your app can respond when the user chooses a different text size.”

I learned the differences and definitions of different terms, such as screen vs views, bars, controls, content views, temporary views etc. 

3. I wasn’t away that the app itself has to constantly save the users activities. I thought the iPhone did that itself. I’m not sure how to go about this.

“Save the current state when stopping at the finest level of detail possible. In this way, people don’t lose their context when they switch back to your app. For example, if your app displays scrolling data, save the current scroll position. You can learn more about efficient ways to preserve and restore your app’s state in ‘State Preservation and Restoration’.”

Pick&Match
Our App!

I didn’t go through all the context, I focused on some specific topics I encountered in our group project instead.

• Orientation

”In general, launch in the device’s default orientation.” However, if it is essential that your app run in only one orientation, you should launch your app in the supported orientation, regardless of the current device orientation. Also, avoid displaying a UI element that tells people to rotate the device. And if people rotate the device 180 degrees while using the app, it’s best if the app responds by rotating its content 180 degrees.

The difference between iPhone and iPad is the default orientation. For iPhone, obversely, it is portrait orientation. But, When you use iPad, you won’t pay attention for the location of home button. So, for iPad, the default is the current device orientation.

• Gesture

The guide suggests avoid define new gestures because users have to discover and remember new gestures and also users will be confused if they are similar to standard gestures.

For our app, users can pick up chopsticks by using two fingers. The gesture is very similar to the standard gesture: pinch which can zoom in and out. I am wondering that if new gestures are close to daily experience, like you use two fingers to manipulate your chopsticks, do they still feel confuse?

• Advertisement

In the guide, I only found the information about how to use an alert. What about the pop out window? Also, I am curious about how to show ads in your app properly?