Intive Blog

UI-UX design

This article is a way to centralize and unify toughs and good practices of what FDV Solutions does during the development of an application, since it’s very important for FDV to centralize the knowledge for future developers in a local non-internet dependent source.

iOS app development embodies the following themes:

● Deference. The UI helps people understand and interact with the content, but never competes with it.

● Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.

● Depth. Visual layers and realistic motion impart vitality and heighten people’s delight and understanding.

Whether you’re redesigning an older app or creating a new one, consider approaching the job this way:

  1.  Look past the UI to the app’s core functionality and affirm its relevance.
  2.  Use iOS themes to inform the design of the UI and the user experience. Add details and embellishments with care and never gratuitously.
  3.  Be sure to design your UI to adapt to various devices and modes so that users can enjoy your app in as many contexts as possible.

Throughout the process, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision.

 

Formatting Content

Create a layout that fits the screen of an iOS device. The content should be visible without further interaction (i.e.: zooming, scrolling).

Insets and image contentMode inside widgets should also be coherent in the hole app. Otherwise the app will look like some ImageViews are just cropping part of the image when actually they are just showing the part of the image whose aspect ratio allows it to show:

The arrival of new screen resolutions rises the problem of maintaining similar layouts between different devices (do that there is different sizes of images). For this reason is ALWAYS a good solution to create the layouts positioning each widget in a relative position.

 

Touch Controls

Use UI elements that are designed for touch gestures to create interaction and make your app feel easy and natural. Keep it fresh but don’t reinvent the wheel.

 

Interactive Elements

To signal interactivity, the built-in apps use a variety of cues, including response to pressure, color, location, context, and meaningful icons and labels. Users rarely need additional decorations to show them that an onscreen element is interactive or to suggest what it does. Plane and simple layouts are good, but remember that is very important to have feedback in every event (i.e: When a button is pressed there are several states that can be customized).

 

Hit Targets

Create controls that measure at least 44 x 44 points, so they can be accurately tapped with a finger. UX is more than just follow static rules, is about making the user happy while using the app. A mental rule can be: “If I miss the action twice, then i need to fix it”. This applies to all kind of tappable widgets.

 

Text, Icon, Images Size

Text should be at least 11 points, so it's legible at a typical viewing distance without zooming. A general rule can be: “If I can’t understand what I’m looking with my device at usage arms’ normal position, then it’s not correct”.

 

Contrast

Make sure there is ample contrast between the font and background colors so text is legible. This applies also to all contrast between foreground, middle and background widgets since usually they all are overlapped by alpha. Commonly, we see blurred background with small alpha values, but it is not the best solution out there.

 

Spacing

Don’t let text overlap. Improve legibility by increasing line height or letter spacing. Tip: Don’t be afraid of leaving space between widgets. Compression is noisy to the eyes.

 

Alignment

Align text, images and buttons to show users how information is related. This requires special care because auto-layout can play around with the layouts between different devices and make mashed potatoes. We can conclude that the development of an mobile app is an art and also a fashion. This means that the developer has to be very aware of the current tendencies and aesthetics on the loop. BUT, above all, always has to keep an eye on the UX and never forget that no matter what pretty is a widget., If is not usable, is not worthy.

Daniel Antoriano Takagaki

Daniel Antoriano Takagaki is a software developer at intive since October 2012. Better known as “Taka”, Daniel is a videogame development technician. He graduated from the Multimedia School Leonardo Da Vinci. Besides developing, he actually plays them, having gaming as one of his main hobbies. He is a member of the iOS Brigade in the company. 

Add comment