Balsamiq Mockups: UI Elements for iPhone Application Part 1


Balsamiq Mockups from iPhone App wire-framing perspective…. Fortunately for any Experience Designer who religiously follow the wireframes ideas, related to websites or software, targeting any platform: mobile or desktop, is blessing in disguise, yes I used the word disguise, because I noticed whenever someone talk about Balsamiq Mockups they usually love to talk about Website Wireframing and Software Wireframing, but iPhone App UI Wireframing never discussed. I would like to point out the key Mokcup Elements available in the Balsamiq Mockups for iPhone UI Elements. iPhone Menu: You will notice the iPhone Menu Mockup is rich with the elements that needed in any general iPhone App, see figure 1 follow



Lets explore it one by one

For a simple label “This is a Label”

To mimic the Delete Button type (without quote) “- Delete Button”.

To produce the Add Button : “+ Add Button”.

Sub-Menu UI representation can be achieved by using the “A Sub Menu, >” command, where “A Sub Menu” can be the text of your desire, and “, >” is the real meat here. Here comma “,” will right-aligned the “>” / Greater-Than Symbol. From iPhone Human Interface Guideline, this navigational icon falls in Tab Bars UI elements.

For Label with Sub-Label the syntax is simple “Label and, Sub-Label”, again comma / “,” is to right-aligned any text it is similar as Sub-Menu except we are using Text instead of Symbol to produce the “Label & Sub-Level” effect.

Checkbox / Checkmark is interesting, to produce the “checkbox/checkmark” effect use “v A Checkmark, (>)” syntax. “v” is to produce the “Checkmark” and (>) is for “Detail Disclosuer Button” .

To produce the “Bulleted List” use “*” / asterisk,

Toggle Button’s “On & Off” state sketching can be done by using “Toggle button, ON” and “Toggle button, OFF” command in Balsamiq Mockups.

In my next post, we will explore more iPhone related UI Elements goodies in Balsamiq.

Happy Wireframing!

CliqCliq Colors: The best app if you are the designer and want to capture the everyday color inspiration.

Annoying factor in this app? The Top-navigation bar, with tiny buttons. Unfortunately if you have thick fingers, you won’t be able to tap it nicely. Design the buttons as they are meant for Humans. Don’t design it for the Zombies / Vampires, because they are not the users of the app. As I am pretty much sure they don’t have iPhone and don’t require any Cell phone. Design it for human.

Buttons are great if they are used it wisely in the app, especially in the Navigation Bar.

The abilities needed in order to be an Interaction Designer

designaday:

Carl Alviani writes in his post on Creative Seeds titled Five things Interaction Design probably isn’t:

I went to Interaction09 in Vancouver with an intense personal mission to nail down a clear definition of Interaction Designer, and what abilities are needed in order to be one. Almost every time I asked (and I asked a lot of times), the answer was “I have no idea.”

Well, Carl, I’m sorry you didn’t find the answers you were searching for. I find it somewhat embarrassing. All I can say is that you must have been asking the wrong people. I know a lot of designers attending the conference that would have answered your question in great detail. The answers would likely vary a lot, but that is because there is a wide range of activities covered under the IxD umbrella. I don’t recall meeting you, so obviously you didn’t ask me. Let me answer your question now.

The abilities needed in order to be an Interaction Designer:

  1. You need to be able to learn about activities and tasks that a person participates in through observation, conversation, and research. This typically involves discovering pain points—things that are difficult or unpleasant—as well as what they identify with. It also involves understanding the larger context, including business goals of your customer and concerns of any other stakeholders. You must be able to record what you learn and communicate it to others.
  2. You must have a foundation of knowledge about visual communication, human behavior, organization, and the medium in which you are working, providing the skills and experience for number 3.
  3. You need to be able to creatively develop solutions based on what you have learned. As you point out, for the majority of us most of the time, this involves some type of computing device that will in some way improve the person’s experience, making the activity easier or more enjoyable. It may be a hand-held, a piece of furniture, or the box under the desk. There are many different approaches, techniques, and tools for accomplishing this, and there are many debates as to which are more effective, but as Jamin Hegeman pointed out, “any design field is not about its tools, as tools change. Designers use the tools necessary for the given project, and often learn new tools or make their own.”
  4. You must be able to document the solution and communicate it to others. This may involve drawing, diagramming, writing, and speaking. It may involve documents, models, movies, animations, and acting. It likely requires different types of artifacts and different levels of detail for the different people to which you must communicate.
  5. You need to be able to work with other people with widely varying skill sets to make the solution a reality. There’s a good chance you will be working with software engineers. You may also work with sales people, business people, domain experts, cognitive psychologists, graphic designers, industrial designers, information designers, and architects. You will certainly be working with customers and users. You must understand the relationships between them, each of their requirements, and work as a negotiator and synthesizer.
  6. Finally, you must be able to evaluate success or failure of your implemented solution, which takes you back to number one, starting the iterative process all over again.

Admittedly, this is a very high-level overview of the abilities that are needed to be an Interaction Designer. In fact, for the most part, they are the abilities needed to be a Designer—period. What differentiates an Interaction Designer from other types of designers is in large part the artifact (and I use that term loosely) being designed.

FriendFeed Email: I think the Email sent to your user should be thoroughly tested. When I scroll down at the end of my email from FriendFeed, I noticed the weird HTML code-leakage. Not a good Human Experience.

Colorstology: very superb color collection I have seen so far. Perfectly aligned according to Months. Only thing put me in thinking mode is the Arrow key on the right hand corner. At first I thought Arrow key will navigate to another month. But it is for Day of the Month navigation.