Hillary Hopper

Mobile UX/UI Candy - Writing For My Audience

Recently I asked some followers what they would like to read about on my site. I realized that writing content for myself would make me only go in circles. So I’ve made a turn in my site and am now writing more articles based on what my audience wants to hear.

Here is a request made by a follower:
“@anareyna: I’d like to see UI/UX tips every now and then :)”

I am going to focus on mobile UX/UI for this question. Mainly because I believe I’ve learned some valuable tips and also because I haven’t touched on it yet here on my site. Although a lot of these tips you could apply to web just as easily.

1.) You MUST create gray scale wireframes
I put this as number one because without wireframes you’re going to have a non functional application. Creating the frames in gray scale is important because you can see the hierarchy of buttons and text. I use Illustrator or Fireworks for this process. But use whatever you feel comfortable with and is the fastest for you to use.

2.) View your work live!
LiveView is a great desktop and iOS app that lets you view your work live. It’s great for seeing button sizes on your device and button placement. You can view it in both retina and non retina. You can also have the option to move buttons around on the actual device. I don’t recommend this because depending on your Internet connection It’s very slow and not accurate.

3.) See your app in motion
I love Mocksup, it’s a great site and app that lets you connect screens to be able to see the flow of your app on an actual device. You can link images together and tap on buttons just like you would if it was on your device. It’s pretty awesome. You can get a free account for one project only.

4.) Designing in Retina
Can’t begin to tell you how much I wish I knew this tip when I first started designing mobile applications. It’s best to design in retina so you can scale down. Even better if your work is vectorized so it’s easier to scale. Also, design in 640x960 and the zoom out to 50% to see what your app would look like at non retina. If you can’t see text and your buttons are too small, then thats a good indication that you need to reconsider your sizing.

5.) Last but not least, test, iterate and repeat
Never believe that your first set of wireframes is the right set. Even with a finished design, question it. I always ask myself “Is this the best possible way to communicate this action? Is there anything I can do here that wold be better?” If it means re-doing the UX or UI so be it! It’s always worth it in the end.

Remember, sometimes it’s necessary to replace beauty with functionality. Besides, the user will never know the difference!