The first, and often last, impression for client applications -- whether on Windows, the Web or a mobile device -- is the user interface. Yet designing an effective one is far more complex than tying some actions to a button or menu pick. That might have worked in the era of Visual Basic, but not for today's Web and mobile app UIs. Fortunately, the nexus of cloud back-end services, application frameworks and UI design software tools allows app developers more time to focus on designing the user experience by providing efficient ways of translating ideas into contextual, visual expressions.
The design process can easily get complex; however, the essential steps involve planning an application's various screens; defining the relationships and navigation flows between them; picking a visual design pattern, such as tabbed or modal, among others; and designing the elements of each screen.
Choose a design pattern and back-end services, then prototype UI
Most UIs -- whether for PC, Web or mobile apps -- still use the model-view-controller (MVC) design pattern originally introduced way back in the '80s with the Smalltalk language. Condensing a CompSci textbook's worth of material into a paragraph, the three main components of an MVC app are the model, which manages data and app behavior; the view handling the display of information; and the controller to capture user input and send commands to the model. When using cloud back ends, particularly platform as a service (PaaS) tools, like the Azure Mobile App and Web services or AWS Mobile Hub, the model runs on the cloud while the client UI handles user input and display, using application program interfaces to remotely execute application logic, store data and user state, authenticate users, and pull information from remote databases. Such a cloud-based back-end design obviates the need to build server applications and infrastructure, allowing developers to focus on the client code and UI design software.
Mobile and Web apps typically use pages or screens as the UI paradigm with app logic and controls to allow navigation between them and to trigger back-end processing. Here, each screen represents a logical portion of app functionality that contains information, controls and navigation elements. The first step in UI design software is planning the navigation flow using something like a flow chart to illustrate screens and transitions.
Detailing each screen is where wireframes come in. Wireframes are simple graphical blueprints of the screen design, including the text and image layout, controls, and other graphical elements. Although wireframes can still be drawn on the back of a napkin, most developers now prefer using a graphical editor. Sophisticated software like Photoshop is often used by professional UI designers, however DIY developers should stick with a vector drawing tool like Visio for Windows, Omnigraffle for Mac OS X and iOS, or even slide software like PowerPoint or Keynote. Indeed, Microsoft has a Visual Studio add-in providing PowerPoint integration. One nice trick is using the hyperlink feature in slide software to indicate navigation between pages. As app designer Luke Wroblewski points out, presentation software is great for showing an app's narrative flow:
Because Keynote is a presentation tool, it's suited for designing Web apps where you need to show process flows and interactions. And, the animation tools make it easy to show how things like transitions and rich interactions might actually work. Combine all these and you've got a tool that allows you to quickly communicate how something will look and work!
Translating drawings to code
Wrapping up: Testing the UI and linking back-end services
Debugging and refining the UI design software requires an emulation environment, either a browser with development tools like the Chrome Developer tools for browser-based apps, along with the Ripple Emulator for mobile Web emulation, or a mobile OS emulator for native iOS and Android app testing. From there, it's a matter of repeating the standard code-build-test-debug cycle until you're satisfied with the results.
The details of wiring in back-end cloud services are specific to the PaaS of choice. For example, when using the Azure App Service, it starts by using Azure's management portal to create the necessary services (e.g. database, server and others) and then downloading a customized code bundle for your platform of choice. If building an iOS app, you'll get an Xcode project with all the code and modules preconfigured to connect to your back end and ready to run in the Xcode iOS simulator. The sample code provides the necessary hooks to the relevant Azure services, platform-specific service calls that can be easily integrated into the client UI.
The combination of graphical UI prototyping software; code frameworks; intelligent, framework-aware IDEs; and cloud back-end app services have greatly simplified the process of building elegant, innovative and effective Web and mobile apps. These apps exploit the nexus powerful client GUIs and cloud services to enable clients lightweight enough to work on a smartphone with application logic sophisticated enough to tackle real world problems.
Your app's life depends on your mobile UX design
Why UI testing is essential
Pros and cons of transitioning from Swing to JavaFX
UI development framework selection is tricky - here are five tips to figure out how to pick the best option.