Photoshop Layer for Demonstrating Gestures on iOS

This question has received: 2 Votes.

I’m building demonstration screenshots of how to use an app and would love to be able to show tap, drag, pinch, and zoom events.

This video shows some really good ones:

http://vimeo.com/19347629

enter image description here

Are there any resources (PSD templates, etc.) that I could use to demonstrate in still screenshots these taps and gesture events?

Thu Mar 06 04:19:39 AST 2014
Answer #: 1
This answer has received: 4 Votes.

I believe this is what you’re looking for: http://www.mobiletuxedo.com/touch-gesture-icons/

Thu Mar 06 05:13:08 AST 2014
Answer #: 2
This answer has received: 1 Votes.

There are a number of different resources from different contributors for representing gestures. Personally I like the style of the gesture set which designed for Ice Cream Sandwich:

enter image description here

Link to download: https://www.dropbox.com/s/aczgz2wkawolqlb/gestures.ai

Thu Mar 06 09:41:50 AST 2014
This question and its answers are found at: Photoshop Layer for Demonstrating Gestures on iOS

How to deliver wireframes to off-shore dev teams

This question has received: 3 Votes.

I am currently designing an iOS application. Before I move on, I know that the route we chose to go is not ideal at all.

The app is social networking app. We have a team in India developing the app. We also have an agency in Germany who we have contacted for the design/brand work. Another local designer and I have designed the entire application wireframes and final mockups.

What is the best route for us to deliver these designs to the developers so that we can reduce questions/revisions.

Our plan is the send the agency in Germany our final designs, have them slice the files and create the graphical assets and then deliver those files to our developers.

Mon Mar 10 00:13:42 AST 2014
Answer #: 1
This answer has received: 2 Votes.

On a more serious now, there are cultural barriers that you will have to deal with Indian developers. They tend to not be empowered or encouraged to question anything, nor contribute their own ideas. … realize outsourcing isn’t all that great in terms of quality of product delivered.

FYI, You can get high quality product like iPhone or low quality chineez phones form outsourcing only, depending on how much money you spend.

I strongly disagree.

I’m from India working as a UX designer, our developer are sitting in the Netherlands, Australia and India. We are continuously pushing new apps/websites/applications to maket. I’d suggest to follow agile process than waterfall for quick communication and to see progress of the application. You can send initial level of document and wire frames among developers to brainstorm or check technical feasibility of the design. Even dev team can start work and deliver functional s/w without design(to check the progress) and design team can work in parallel.

But I would suggest wire frame team should work ahead of design team. Design team should work ahead of dev team by at least 2 weeks

Mon Mar 10 14:12:45 AST 2014
Answer #: 2
This answer has received: 1 Votes.

The best workflow is to be prepared for all the questions and if there are not many, then contact the developers. I would be surprised if any project can go on without questions or just a few, specially with people on different places and with different cultures.

Still, since you have the wireframes, you have to send those to the developers, but ypu also have to send detailed documentation explaining each wireframe and component. Remember that two people may have, at least two opinions about what something means.

At the same time, send the wireframes to the designers so they can start working on their part. Of course, they have to know that the design should be a bit flexible and that things would be “fitted” later during the development process.

As soon as you have elements ready, start assembling them and testing.

But remember, make things super clear, document everything, not to avoid questions, but to make the work easier and to avoid mistakes.

Mon Mar 10 00:24:49 AST 2014
Answer #: 3
This answer has received: 1 Votes.

As someone who has worked on both sides of the fence ( I have worked with an offshore development team while working from US and I am currently leading an offshore development and UX team in India), here is my take on some of the things you should do:

  1. Establish the need very clearly in terms of documentation with regards to what is the expected outcome to both design and development teams.Also explain the various constraints they should be aware of such as device specific parameters, resolutions, use of imagery etc.

  2. Ask the offshore development team to establish two lead persons – One from an Technical and development standpoint and one from an visual standpoint. If you just have one person from a technical standpoint, you will not get responses or inputs with regards to design challenges and potential cases where the design fails

  3. Ask the design team in Germany to establish a design lead who communicates with the technical lead and design lead in India to understand what all has to be sent by the design team while keeping you in loop. While you can also serve as the intermediary , I would recommend direct communication (keeping you in the loop) so that there is nothing lost in translation.

  4. Get a BA to clearly define the user flows and interactions for the both the design teams and the Technical teams. If the user flows and interactions are going to be communicated via phone or email, irrespective of which offshore team you work with you are going to run into issues with mis-communication and missed steps.S

  5. Ask your design team to not only provide visual mockups of the expected screens but also provide redlines so that the development team is aware of the the different font sizes, colors etc. Also ask them to check with the development team lead for samples of redlines other designers have given them so that you can establish the level of fidelity needed

  6. Set up a daily or bi-weekly review to go over the development work\design work including the design\development lead from India and the design lead and ensure the minutes and action items are clearly documented so that the expected issues and action points are not lost in translation

On a side note, Choose a good company to do your design\development work. I know this doesnt answer the OP’s question but to claim that all Indian off shoring companies have a low quality of work is just demeaning and highly disturbing. I have worked with a lot of brilliant designers and developers who do quality work and can be trusted to deliver the goods provided there is proper and regular communication but they are not likely to found in the small outsourcing shops which have just sprung up. Hence do your research in choosing the company and see their track record before assigning work to them.

Mon Mar 10 17:26:53 AST 2014
Answer #: 4
This answer has received: 0 Votes.

Consider methodology first, then documentation/tooling second. The resources at hand may define what is practical, or how you may be able to steer the project. Two high level choices:

A basic “waterfall” approach. If your goal is to “… reduce questions/revisions.” while maintaining a high fidelity with the intended design then a tool like Axure can produce a dynamic prototype that lets you specify an exact dynamic design and very complete documentation, including comments about where flexibility required. You should aim to have as ‘perfect and complete’ specification as possible at the time, even where visuals and other details not finalised.

A different approach would be to do a quicker and simple dynamic wireframes and then drive high quality communication. I have used http://www.invisionapp.com/ with a remote team very successfully. BUT in an Agile methodology. For that project I was able to give feedback on the work-in-progress development, and developers can query design any time.

Mon Mar 10 12:11:28 AST 2014
Answer #: 5
This answer has received: -1 Votes.

Outsourcing to India is typically only feasible via highly documented waterfall workflows.

The process is typically:

  • document
  • document
  • document
  • send to India
  • receive something that is half way there
  • document some more
  • document some more
  • document some more
  • send to India
  • get something marginally better
  • realize outsourcing isn’t all that great in terms of quality of product delivered.

I know that sounds flippant, but that’s been my experience at 3 companies that have decided outsourcing dev was the way to do it.

The only success we’ve had with it was when the UX team took on all the Frond End Development ourselves, sent that over, and had them wire things up. We did that because we eventually realized that the amount of documentation we would have to create to get what we wanted in return far exceeded the amount of work it took to just built the front end ourselves.

On a more serious note, there are cultural barriers that you will have to deal with Indian developers. They tend to not be empowered or encouraged to question anything, nor contribute their own ideas. As such, they are incredibly literal in terms of just doing what you documented and nothing above and beyond that.

Good luck.

Tue Mar 11 21:42:11 AST 2014
This question and its answers are found at: How to deliver wireframes to off-shore dev teams

Sharing User Flow – Use Separate or Combined Interaction?

This question has received: 2 Votes.

I’m working on a sharing flow for an iOS Mobile App where the user will be gifting something to up to 10 different people. Those people could be contacts stored in Contacts, Facebook friends, Twitter, etc.

I’m trying to understand whether a combined flow (e.g. select and combine different types of formats, such as email, text, FB all with the same SEND button) is more effective than using separate interactions for each type of contact. What intuitively works better?

Thu Mar 20 17:56:59 AST 2014
Answer #: 1
This answer has received: 1 Votes.

A combined list works well as all the choices can be selected in a single view. However, users may want choose the network to use so I would supplement this by identifying the network each contact will be using. Another thing to be wary of is that the merged lists may be exhaustively long and littered with multiple duplicates (contacts that exist in multiple networks).

A separate list to select from imparts additional steps if the user wishes to choose contacts that reside in different networks. But may help the user with searching as it acts as a filter. Users would most likely know where contact A can be found, and wouldn’t have to sift through a large merged list.

Side note: the app can acquire permission for the phone contacts upon installation. However for Facebook and Twitter they require the user to do it within the app. Unsure if you plan to ask/require from the start, but I feel that the separate list layout may be better suited to persuade the user into adding their social network contacts.

Thu Mar 20 20:14:43 AST 2014
This question and its answers are found at: Sharing User Flow – Use Separate or Combined Interaction?

Make image clickable to change it or add dedicated button

This question has received: 2 Votes.

I have a design question for iOS development. I am building this app where a user can set a profile picture and also “before/after”-pictures. From a design perspective, I wonder whether it is a good decision to make the images “clickable” as I display them on the screen so that the user only needs to tap on the image and then gets the possibility to change it or if it makes more sense to provide a dedicated button saying something like “Edit picture” / “Edit”,… Maybe even do both? I am just wondering about the reasoning that each should be considered when deciding to go for the one or the other option…

Wed Mar 26 08:20:33 AST 2014
Answer #: 1
This answer has received: 1 Votes.

In Android there’s no separate button which says “Edit Picture”. You tap on the image to add a photo. But on iOS and some other mobile apps there’s an “Edit” button available.

I’m an Android user and I didn’t find any problems with the missing “Edit” button. But as @jgthms mentioned in some cases people will interpret this as a “View Full Image” rather than “Edit”.

I personally think adding the text “Edit” will look ugly on a mobile app so I suggest something similar to Facebook. Like this,

Edit Profile Image - Facebook.com

Wed Mar 26 10:00:00 AST 2014
This question and its answers are found at: Make image clickable to change it or add dedicated button

Terminology: PIN code or Passcode?

This question has received: 1 Votes.

I’m working on an iPhone, and we are currently doing some user testing. This app deals with sensitive personal information. Security is definitely important for us. Instead of using username / password based authentication, we decided to go with 4 digits PIN/Passcode based authentication.

User needs to input the passcode each time he invokes the app, and we don’t want to hurt the usability by forcing the user to use his password each time.

Currently, we call this passcode as PIN, because our web application uses the same terminology. User feedback suggests, our beta testers are unable to discover this feature.

When users login for the first time, we suggest them to set a PIN, so this is not something they can miss. I believe this is because iPhone users are more accustomed to the terminology “Passcode” then “PIN”.

Maintaining consistent jargon seems like a no-brainer, but should we maintain uniformity between our products or with the system?

If you think about it, “PIN” is a concept people should be familiar with (ATMs use the term “PIN”).

Thu Mar 27 05:53:15 AST 2014
Answer #: 1
This answer has received: 0 Votes.

When users login for the first time, we suggest them to set a PIN, so this is not something they can miss.

This is where I disagree with you. When users download a new app, they don’t want to fill in every field appropriately. They want to reach the app, test it and see if it’s worth the time to register. Because of that, your workflow needs improvement. Let the user test the app as quickly as possible. You just need to ask for username/password or third party identity provider (Facebook, twitter, google, live-ID, …) and skip the rest.

Later, when the user are really working your app, remind them of setting the PIN/Passcode, and you’ll have the users’ full attention. If it’s still installed, they’re likely to keep it – if not, well, then it’s gone. You can do this with other fields as well, but only ask for info you really need.

On iOS you should call it Passcode, even if your web app says PIN. In addition, if the account name entered is used from an iOS device you could replace PIN with Passcode. Alternatively you could use both PIN/Passcode and gray out PIN/ if the account name entered have been used on an iOS device lastly.

Thu Mar 27 11:55:50 AST 2014
Answer #: 2
This answer has received: 0 Votes.

The text in the screenshot says that the feature adds an extra layer of security, but it doesn’t actually describe what the feature does / how it works. I think you need someting more specific like:

When enabled, you will be asked to enter your PIN every time you access the application. This extra layer of security helps prevent your personal information falling into the wrong hands.

Thu Mar 27 10:11:41 AST 2014
Answer #: 3
This answer has received: 0 Votes.

If you do good job explaining what the code does and why you need to set it, the naming is of secondary importance. Also, aim for consistency: if you’re calling it “PIN” everywhere else, keep calling it “PIN” in your mobile app as well, even though iOS calls it “Passcode”

Thu Mar 27 11:14:53 AST 2014
This question and its answers are found at: Terminology: PIN code or Passcode?

Question on Apple’s choice on a particular UI/UX design. [closed]

This question has received: 1 Votes.

So I was on hold on a call and my phone was on Speaker, when I observed the choice Apple has made on the “Hide” Button.

enter image description here

So my question or rather point-of-discussion is why the Hide is NOT on the left side? My guess is since majority of us are right-handers and for using the iPhone using one hand only Hide is better placed on the right and not the left.

It couldn’t be just below the End Call as some may press the End Call button accidentally.

Just my wild guess…

Any thoughts…

Mon Mar 31 12:56:44 AST 2014
Answer #: 1
This answer has received: 0 Votes.

This new placement is obnoxious. Since the change, I keep hanging up on calls accidentally since I take most calls on speaker.

Mon Mar 31 13:20:57 AST 2014

iPhone: Tab bar item badge count overflow

This question has received: 1 Votes.

I want to display the unread-message count on a tab bar item.

What should be the max badge count?

What should be displayed when the count exceeds that max?

Thu May 08 19:04:43 AST 2014
Answer #: 1
This answer has received: 1 Votes.

Max count should not exceed 2 digits for unread messages, i.e. not more than 99. When the count exceeds 99 display 100+. When the count exceeds 999 display 1k+ etc.

Fri May 09 08:57:19 AST 2014
Answer #: 2
This answer has received: 0 Votes.

When displaying a counter I would consider primarily three elements:

  1. What’s the maximum number that is still perceived as useful by users
  2. What’s the impact in performances (load-time, data consumption)
  3. Visual design aspect of it which is the ‘common’ discussion around how many characters the counter should support.

About the first point, I consider that it depends on the type of the messages: iMail unread email counter goes up to effectively count how many messages are unread (=lots of noise). Gmail app on the contrary, if the account is setup with the ‘important’ folder, only counts the messages that are marked as important. Users reading the unread counter in the Gmail app knows that those are important emails so that number is always informative of ‘important’ actions still pending.

In the case of a ‘less critical’ unread information counter, e.g. number of notifications from my connections in my favourite social network, I can expect that after a certain number of actions, the counter loses meaning. In these situation the counter could stop at e.g. 20+

Limiting the counter to e.g. 20 or 99 it’s going to be useful in case your performances decrease if the unread messages are high. In this case find what’s the maximum number before this decrease is noticeable by users, until you have time to optimise it and increase again the counter max limit.

In terms of visual representation of the actual counter, one common pattern is to have a ‘+’ symbol (check e.g. Facebook left sidebar notification http://mlmdreamsaver.com/vicki-berry/wp-content/uploads/2012/06/fb-notifications3.jpg ). This is useful to effectively communicate to the user that the counter is not showing more than 20 elements.

Tue May 13 11:03:15 AST 2014
This question and its answers are found at: iPhone: Tab bar item badge count overflow