📜 ⬆️ ⬇️

50 tips for developing flawless design iOS apps

Here is a translation of an article by Nick Carson. The article brings together, it seems to me, the basic rules for constructing an interface for iOS applications.

1. Perhaps the touch control is flexible and intuitive, but it is far from perfect. Think about what people do when they use your app, and how they hold the device. Remember that fingers cover a much larger area than it seems, and their accuracy leaves much to be desired.

2. Focus on the device when creating applications: consider not only the screen size, but also where and when the device is used. Most of the iPad is used for entertainment between 8-11 in the evening, before going to bed, while the iPhone is in line for a bus or in a coffee shop. Consider various usage scenarios when developing applications — including how far the device is located on behalf of the user.
')
3. View your application on the screen. Determine what the main tasks are achieved when using this active screen, and then make it so that the user can solve them using the minimum number of additional options, buttons and other controls. Avoid too much functional load on the active screen, especially on mobile devices.

4. The development of programs for mobile phones or tablets differs significantly from the development of web applications and even applications for a standard desktop — each element occupies a specific place on the screen, and this rule must be strictly followed. Consider this as an advantage rather than a limitation: fixed templates will help better control the size and location of each element visible to the user.

5. When adapting an application to screens of various sizes, remember that if it changes significantly - for example, from iPhone to iPad - the way you use the device will also change. If the sizes are limited, use the main functions of the application, with their increase - you can include any additional functions that are not included in the more condensed version, since you have the opportunity to beat the extra space.

For the rest of the 45th - welcome tackle.

6. The secret to creating a good icon for an application is to reflect the main idea: the obvious functions of your application, but in a visually appealing form. IOS users are sometimes very careful when choosing icons for the desktop. Take the time to create icons of all possible sizes so that they look good on the screen of any device, including a miniature version used in the user's Settings menu.

7. The finger is larger and less accurate than the mouse, so the click area on the touch screen should have a significant error. To simplify the task: never place too many controls in one area of ​​the screen or too close to each other, and make sure that the buttons are large enough for accurate pressing. Apple recommends a size of at least 44x44.

8. Try to limit the basic functions of your application from development, and if possible, do not deviate from the initial idea. Thus, you can develop and improve the concept of the application, as well as its appearance and interface, without creating confusion by adding new variables.

9. When developing applications for iOS, pay attention to the Apple notation system: they have extensive experience in developing user interfaces. Changing the style of one of the controls to improve the look and feel of your application is one thing, but never change the function — it will only confuse users who are used to standard OS applications. For example, red buttons are used to remove objects, and blue - to perform actions.

10. The best application interfaces are usually simple and intuitive. They seem very understandable to users, and they can feel right at home. The main task of the developers is to create a stunning visual effect so that users are fascinated by the application and at the same time can use it without reading any instructions.

11. Start development by planning the base structure and then add basic functional blocks. The easiest way to do this is to draw a block diagram of the application, and then connect all the active screens and points. Ask a stranger to look at your sketches and evaluate whether it’s convenient to use the features offered.

12. When choosing the appearance and atmosphere of the application, collect inspirational materials to help - for example, create a mindboard. Will it be a neutral friendly interface or an image of real-life materials like leather, stone or metal? Experiment with different combinations and color combinations: Adobe Kuler can help.

13. The size of the iOS workspace can vary from 1024x768 (iPad) to 640x960 (iPhone 4 and 4S) and 320x480 (iPhone 3GS). Often you have to insert descriptive text in addition to simple icons to fit all the necessary information into a small screen. This is a great way to develop a special visual communication language for your applications, thanks to which it is clear what functions icons perform.

14. You can easily adapt the size of the image to a different screen size if you create all the graphic elements in Illustrator in the form of vectors, and then import them into Photoshop, where you can easily adjust them to specific screen sizes and resolution, modifying and simplifying where it is needed .

15. Work on sketches of design and functionality on paper, using as a sample available templates for iPhone or iPad. When you are ready to take the design to a new level, tools such as LucidChart will help you create a functional layout of the application in order to further transfer it to Photoshop for finalizing the look of the application.

16. Apple's recommendations for developing an interface design are indispensable for achieving compatibility with the platform, but some rules need to be violated if circumstances so require. Some applications — for example, Flipboard, Twitter, or Instagram — are completely different from standard user expectations — so don't be afraid to go beyond the conventions.

17. When developing an application for iPad and iPhone, always start with a larger screen and then zoom out, simplifying the image. Often, while maintaining the overall concept, it is necessary to rethink some elements of the interface, for example, to consider landscape and portrait modes to include various types and functions. Simply changing the scale of an interface is usually inefficient, so take the time to find a better approach.

18. When developing real-time applications — such as games — the development of key elements of a large enough size so that users can easily and quickly select them is crucial. In the testing phase, find a user with relatively large hands: this is the most effective way to find out if the elements meet the requirements and if they are large enough.

19. One of the key decisions made by the application developer is determining the degree of customizability of the application relative to the basic settings. At each stage, ask yourself this question, and always keep track of what is most important in each specific context. For functionality, for example, the general settings panel, the basic settings are usually the best solution.

20. Learn how your application adapts to landscape and portrait modes. Maybe for individual elements it takes more or less space when changing orientation, or need to add some other options or functions? Here you can use the ability to show and hide any elements.

21. As already mentioned, the icon gives users a first impression of your application: if it looks ill-conceived or unattractive, the application will not be taken seriously. You can search the App Store and compare it with other icons in this category of applications. A good way to evaluate how your application icon looks like, put it on the screen among others.

22. When developing applications, the form should always follow the functionality. There is always an infinite number of options for implementing the task in terms of appearance and atmosphere, but first of all you need to clearly understand the purpose of creating the application, even before you are engaged in its appearance and determining the target audience. Naturally, different audiences will prefer different styles - for example, business applications should not be executed in a cartoon-like manner.

23. As the application evolves over time, set a goal to add functions without undue complication - this process is known as “layering of functionality”. Start with a well-defined framework structure, information architecture and interaction schemes, and be consistent - this will add additional functions without changing the concept of the application.

24. Carefully consider the development of the icon. This is the main positioning element - it should not exactly reflect the functionality of your application, but suggest professionalism, and its color scheme, shape or image should correspond to the interface of the application itself. The user should not have dissonance between the appearance of the icon and the application itself.

25. Super advice - High-quality design can be perfectly adapted to other sizes - remember: services such as Google, Facebook and Twitter were adapted to other forms, or versions of applications for the iPhone or iPad, such as iWork. The smaller versions have a more conventional structure, however, for the most part they have the same look and atmosphere.

26. Visual thinking often helps to improve an idea, use pen and paper, Photoshop or an interactive tool, for example, Balsamiq mockups. If you have a working prototype on your device, you can get precious testing cheap - just buy a cup of coffee to a friend, in exchange for unofficial 10-minute usability testing.

27. Usually, users expect programs to function and look a certain way. For example, do not use the “tweak” gesture for any functions other than zooming in, folding, or expanding an image; this will only confuse users. But you are more free to choose color schemes - it will be too boring if all applications slavishly copy the standard Apple palette.

28. It may be obvious, but to keep the application simple, avoid layering functions. This may sound great when compared to other applications, but it can make it difficult and difficult to use your application. Avoid large amounts of information, squeezing a large amount of information into a small screen will not make the application easier, it will simply tire the user.

29. Always develop an application, starting from the goal that the user wants to achieve - and at the same time, help him to do it easily and intuitively - and not just on the basis that the selected design is the easiest. Typically, applications are developed on the basis of a single technical concept, where the user interface is built around its needs.

30. Most high-quality applications have a single stylistic theme, which in turn affects design solutions, and gives your applications a sense of wholeness. This topic should always correspond to the main function of the application: we give a reverse example when the topic does not quite correspond to the function - the use of “stitched skin” in the new application Find a Friend.


31. The simpler the application icon, the better. The icon should be perfectly recognizable in different sizes. This does not mean that it is not necessary to detail the image, but these details should not obscure or overload the focus of the review. Avoid and use text, let the icon visually represent your application.

32. If the visual area of ​​the control is slightly smaller than the standard 44x44 touch-area size, make sure that the screen area responding to the user's touch is larger and do not place the controls too close to each other.

33. Try to place the elements so that the user during the work does not cover the necessary information with his hand. Usually, for this active elements are placed at the bottom of the screen, so that nothing obscures them. If this is unavoidable, consider how you can display hidden information. A good example of such a solution is the text selection function in iOS, where a magnifying glass appears when a text is selected.

34. When graphic elements are felt as real, it always looks advantageous. IOS applications are usually designed with realism in mind, so the objects on the ercan have volume, light and shaded areas, as if the user can touch them. A realistic interface must reflect the properties of real objects, or the illusion will be broken.

35. If you are developing a theme for the customer’s order, it is important to apply it when designing even the smallest details of the interface. If you are developing, for example, a DJ application that looks like a mixer, you can use wiped and textured buttons, shiny discs. An unexpectedly appeared control that does not support the general concept will look completely out of place, therefore each new component should correspond to a general theme.

36. By their nature, mobile devices have limitations that developers have to overcome. There is no keyboard, the screen is very small and there are only a few real buttons. When designing the application interface, especially for the touch screen, you need to clearly define the hierarchy and important elements of each of the active screens. For example, if one of the buttons will be constantly used, place it at the bottom of the screen to make it easier to press it with your thumb.

37. If the icon of your application does not attract attention, it does not fulfill its function. Bad icons are icons where instead of an individual design averaged is used, text is used and they are overloaded with details. And once again, make sure that your icons can be resized without affecting your own features — if Apple becomes interested in them, you will only have a couple of days to provide a high-resolution image.

38. Despite the fact that resizing an application by stretching an image, adding a minimum of new information is easier, it will be wiser - although it will take more time - to completely rethink the management of the application and add new elements in order to take full advantage of more large sizes. Devices with large screens provide a huge field for user experimentation, while for phone screens, access to information and speed are more important.

39. When developing the structure of the application, think over each screen individually, considering where and what information to place, and what controls are needed. It will probably be difficult to immediately understand which controls will be needed, so focus on the main function of each of the screens. When you sketch out some full-size screens in Photoshop, save them to your iPhone in the photo viewer, and just glance over them and make sure they look good on the screen.

40. Usually, controls in applications are located at the edges of the screen, with the main focus being in the center. The elements should be located compactly, since in principle there is little space - but the user must distinguish them at arm's length, and when clicking on one element, the other should not be activated.

41. If you want to develop an interface striking in its beauty, always focus on the device of a newer generation. Make the most of all the possibilities, including additional textures, details and nuances of design, and then adapt the application to older devices.

42. One of the prerequisites for developing applications is to place a light source at an angle of 90 degrees at the top of the screen, which will illuminate all interface elements. Angle of illumination allows you to present all the shadows and gradients straight without tilting Using a 45 degree angle is possible, but when comparing, your application may lose to others.

43. With verified and moderate use, high-quality textures and materials will give a sense of quality and high-class physical objects - for example, anodized aluminum, leather upholstery, walnut shells or mirror chrome - which in turn will give the application a finished and expensive look and enhance it value.

44. If you in the application offer a fairly wide range of settings, make sure that the user can find the most important of them in one or two clicks. Even the most advanced of them should be launched in three clicks.

45. Highlight a couple of strengths of the application, and make sure that they are reflected in its icon. Show it to those who have not seen this application before, and make sure that they interpret the concept of the icon in the way it was originally intended. Do not be afraid to drop old ideas and start over.

46. ​​If you want to transfer the application for iOS on Android, consider the following: older phones can work with the same applications, the OS automatically adjusts the size of images and text. As for tablets, it is better to make changes to the design of some screens. Remember that the screen resolution and density of elements are two different things - you have to check how the application looks on the big screen with less density several times.

47. Remember that Apple has a lot more design standards than Android, and accordingly, visual consistency. Android phones and tablets have many more ways to manage applications, such as the menu button, back buttons, volume control, menu bar, etc. - but these elements may be used differently depending on the application.

48. The best-performing applications, one might say, do not have an interface — this is just “live content”. Constantly review the concept - never rest on your laurels - test it at every stage of the process. If you do not strive for excellence, the solution will be very limited.

49. The final tests of the application should always take place on real devices, and not on emulators - this does not hurt even in the early stages. When transferring to Android, make sure that the testing uses different devices with different screen resolutions and densities.

50. When developing applications for the iPad, it is necessary to take into account the many nuances of the forms of using the application. When switching between landscape and portrait modes, it is important to consider which elements will change, and which elements will smoothly change into another shape.

Acknowledgments: Yasuko Chujo and Koji Tachibana at e-bird Inc; Scott Meinzer at tap tap tap; Bowen Osborn at Shotzoom; Mladen Djordjevic at NFANY; Christoph Teschner at Algoriddim; Joey Neal at Superstashapp; Ben Zotto at Cocoa Box; Jon Steinmetz at Pixel Research Labs; Mike Rundle at Flyosity; Alex at Androidslide; Steve Varga, AKA Vargatron; and Marcos Weskamp at Flipboard.

Original

Source: https://habr.com/ru/post/137342/


All Articles