May 26, 2015

How to release a Mac app: 2. Design.

In the previous part, you checked all requirements for the app idea and decided to start a project.

Now, it is time to design something that “works” without a single line of code. Modern tools allow to test any idea using graphics-only prototypes.

  • Wireframes. Start by creating rough sketches of all main screens for different states. Use paper, ignore chrome and tiny details at this stage. You should produce a set of wireframes connected to each other into a pure mockup with a well-defined workflow.

  • Empty States. Now review the mockup and imagine how it would look after the first launch, or after you remove all data. Maybe you need a configuration wizard or welcome screen after installation. These details do matter for development, so decide on them from the start.

  • Huge Data. This is another edge case which you have to consider while reviewing the rough prototype, because it may influent how the app behaves and looks in other states. For example, it may turn out that your plain lists need grouping or multiple selection, as well as contextual menus or special commands.

  • Preferences. Advanced users need preferences for different modes of work. Indeed the less options you have, the better is user experience, but almost any Mac app includes Preferences, and yours will hardly be an exception, so spend some time to make a list of possible settings and group them by panels.

  • AppKit ≠ UIKit. The rough mockup is ready and you must already have some ideas about its visual appearance. Time to launch Sketch, Photoshop, or any other tool for building user interfaces. Please remember that Cocoa is very different from Cocoa Touch, custom panels and buttons in Desktop apps require much more work than in Mobile or Web. This is hard, but try to use standard Aqua controls as much as possible.

  • Selection and Focus. While rendering controls, lists of data, menus and panels, keep in mind that each user input element may have a focused state. Also, selected items in the list may have inverted background and look differently.

  • Accessibility. While “feeding” your .sketch files with mouse-hover buttons and super-tiny icons, keep in mind that OS X is the most accessible system for the Desktop. You should avoid small font sizes and try to keep layout as simple as possible. Also make sure to build the interface in which all controls can be accessed using Tab or hotkeys, keyboard-only users will thank you.

  • OS X Widget. Starting from Yosemity, apps may provide Dashboard-like plugins for the OS X Notification Center. If you need one for the app, it is better to plan for it before development is started, because the app architecture may differ significantly in dependence of the level of integration between the main program with user data and such widgets.

  • Menu Bar. The number of apps with popup panels located in the OS X status bar is huge, your app may need such action-hub as well. Just like with widgets, the app developer or team is better to know about this kind of integration from the very beginning. As result, you will have better estimates and less massive changes on later development stages.

  • Help Book. After you checked all items above, please consider to design a Help Book. Most stock apps made by Apple and the best apps from other good companies like Panic and Bare Bones provide local integrated help and even user manuals allowing to work without Internet access.

Next, you need icons. However, they are so import for any Mac app that worth their own post. See you there.

No comments:

Post a Comment