Design Mistakes We Made in Our iPhone App This year at FreshBooks, we released our first iPhone app. Our company’s been around for almost 10 years, and this is truly our first new product since the launch of our cloud accounting web application. We treated the development of our iPhone app like a blank canvas where we could apply some of our team’s most recent design principles. We also wanted to reinforce the lessons we’ve learned during the development our product. But ultimately, the creation of our official iPhone app was an opportunity for us to learn and grow. Making Mistakes is OK Getting things wrong is inevitable when designing a complex user experience like a mobile app. As logical as your wireframes may seem, or as beautiful as your mock-ups may look, some of your designs are going to fail when you put them in front of customers. And, believe it or not, that’s a really, really great thing. When we designed the FreshBooks iPhone app, we embraced failure as part of our design process. iPhone Home Screen How We Got It Wrong
Transitional Interfaces Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys. ...but there's little consideration about how it all fits together outside of a static comp. Oh, ok sweet. How? Folks keep throwing around the word “delight” when referring to animation and cute interactions. Animation leverages an overlooked dimension — time! Let's take a look at some simple ideas: Easing/cushioning In traditional animation, a breakdown determines how a mass moves from Point A to Point B.
Improving UX with Customer Journey Maps By Jacek Samsel The necessity of providing user satisfaction on every key touchpoint in your business is critical to your success. The issue, however, is identifying those crucial touchpoints. Customer journey maps could be an incredibly helpful solution in this area. Borrowing from Service Design Service design is an activity performed in the marketing and management departments of businesses. In the context of website production, the closest analogy would be user experience design (UX). In a nutshell, service design involves providing or creating positive feelings for customers while they are using the designed service (product), with the focus on the interactions that take place in a variety of channels (which encompasses both the online and offline world). A well-designed website is not enough when the customer’s visit to your brick-and-mortar physical store is an unpleasant experience, or when her tech support call was not satisfactory. What are Touchpoints? The Problem to Solve Tips:
Invisible animation There’s no doubt that animating user interfaces is a rising trend. Risen enough that the emphasis is often put on the animation itself, rather than on improving the user experience through subtle and functional animation. Pasquale D’Silva gave some good advice in his talk at Web Direction South in 2013, including: Good animation is invisible.You shouldn’t notice that you’re looking at animation. It’s great advice that we — the team behind Campaign Monitor’s email builder — have been trying to apply with a few principles in mind: animation must improve the usability, feel natural and subtle, and give feedback to the user. Having spent the last year working on the email builder, I’ve learned that animation on the web — as opposed to native apps — comes with many challenges that go beyond finding the right timing, spacing, poses or easing. Add layout drop-down When users press the “Add layout” button, the layout drop-down fades in and comes from the button itself. Sidebar accordion
5 Simple Tips for Designing Better iPhone Apps As users shop the Apple App Store looking for new apps to buy, they judge their potential purchases based on design. We’re told early on in life not to judge a book by its cover, but without a way to trial an app, screenshots are one of the few ways a user can judge the quality of it. Since it’s not possible for someone to judge ease-of-use (usability) or code-quality just by browsing the App Store, judging entirely based on design makes sense, and so apps with better design tend to be chosen more often when compared with competing apps. So how can we design better apps? Well, I’m glad you asked. I’ll discuss five simple tips that will help. 1. When we talk about an app’s design, we’re talking about two main components. Experience design is all about the goals of the app, such as which features to include, and how the user will accomplish those goals. The user interface design is what that experience looks like visually. Image source: MOObileFrames 2. 3. 4. 5. Related Content About the Author
The anatomy of a credit card form — User Experience Design (UX) Paying for something online with a credit card is simple, right? Yes and no. Yes, because we’ve been doing it since the early days of the Internet (e.g. Amazon), and no, because no two credit card forms are alike. Over the past 20 years, we’ve built a mental model of paying online: I pull out a credit card from my wallet, enter the card details into a web form, and click a submit button. Paying for something online is still 2–3x clunkier than paying in-person. Online, we’re getting closer. But before credit card forms become a thing of the past, we still have the present-day task of adding clarity, simplicity, and security to the credit card form. At Wave, our Invoice product enables business owners to create and send invoices to their customers, and to have those invoices paid via credit card. Our goal was to make sense of all the various inputs and questions a user may have, including: What payment cards are accepted? But, where do you place the logos on a web form? Nuts, right?
Mobile UI Design Patterns: 10+ Sites for Inspiration By Jacob Gube User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users. Mobile apps and sites have unique UI design requirements because, compared to their desktop counterparts, they’re used in smaller screens and, at least with today’s modern mobile devices, rely on fingers instead of a keyboard and mouse as input mechanisms. Whether you’re designing a mobile app UI for the first time or in need of specific design solutions, these mobile UI design pattern resources will surely help! 1. Mobile UI Patterns is a great site to visit to see common mobile UI design patterns such as activity feeds and notifications. 2. Inspired UI is an excellent mobile UI design pattern gallery with over 1,000 screenshots of real mobile apps. 3. lovely ui 4. This design pattern gallery is a supplement to UX designer Theresa Neil’s mobile design pattern book published by O’Reilly Media. 5. pttrns 6. 8. 9. android pttrns
Responsive Design: Why and how we ditched the good old select element How rethinking the way users make complex selections across devices completely changed our design. We’ve all seen this and know what it does: It’s the HTML select element. The invention of select dates back to 1995 with the introduction of the HTML 2.0 specification. Good things first By using the select element it’s a no-brainer to create a list of selectable options. So why not just use it? At Tradeshift we’ve been working a few months on some soon-to-be-released updates for our user interface. Presenting option lists to users is most easily done by using checkboxes, radio buttons and by using select. The number of selectable options we have is often counted in hundreds which makes the standard select element hard to navigate.Example: When specifying the unit type on an invoice line, the complete list contains hundreds of possible units. So what can we do now that the cookie cutter solution does not make the cut? The solution
Navigation Drawer Developer Docs Creating a Navigation Drawer The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options. Displaying the navigation drawer The user can bring the navigation drawer onto the screen by swiping from the left edge of the screen or by touching the application icon on the action bar. As the navigation drawer expands, it overlays the content but not the action bar. The user can open the drawer panel by touching the navigation drawer indicator. Because they are transient, navigation drawers make views less cluttered. Open the drawer from anywhere in your app by swiping from the left edge of the screen. Dismissing the navigation drawer When the navigation drawer is expanded, the user can dismiss it in one of four ways: Touching the content outside the navigation drawer Swiping to the left anywhere on the screen (including edge swipe from right) Touching the app icon/title in the action bar Pressing Back Actions Style
Table Toolbar Sort, filter and group can appear in all possible combinations and also as single actions. Make sure to use the proposed order if you use more than one of these actions. The dialog that opens when such an action is chosen is called view settings dialog. This dialog can provide any combination of these three settings, including only one setting (e.g. just sort). If sorting, filtering and/ or grouping is a common use case in your app, offer one, two or all of the corresponding features within one or several view settings dialogs. There are two ways for triggering the view settings dialog: Trigger the view settings dialog with a button on the table toolbar. Use one of these versions according to the following guidelines: In any case, only use the view settings you really need. Using the view settings dialog allows you do define several sort, filter, and/ or group settings per column. Support a consistent experience.
A shorthand for designing UI flows by Ryan of 37signals Flows are just as important to good interfaces as individual screens are. Customers don’t land on screens from out of nowhere. Specific sequences of actions lead customers through your app as they try to accomplish their tasks. But as important as they are, flows are hard to communicate during the design process. Drawing out every state of a flow is too time-consuming. And drawings become instantly outdated as screens change. Working on 37signals Accounts has recently raised this issue of communicating flows for me. Flows are made out of individual interactions. Here’s a simple and concrete example. The format is really fast to sketch, and it communicates the essentials of what needs to happen as I’m imagining it. This log-in flow includes a few more notations. You’ll also notice there are two arrows pointing out from “Submit email matching a user account” under the “Forgot password screen.” Here’s another complex flow. Now don’t forget: all diagrams are destined for the garbage.
Inside iOS 7: Calendar app comes with sterilized UI, few feature changes While Apple updated every first-party app for iOS 7, one of the most heavily modified is Calendar, which sheds the silver and blue skin seen in iOS 6 for a grayscale theme almost devoid of color. From left: Month, week and day views in iOS 7's Calendar app. With the new Calendar app, Apple is going for a spartan, almost bleached look with an all white background, subtle gray borders and lines, and text that is either a shade of black or bold red. The design is eye-pleasing, though users familiar with previous version of iOS may find the change a bit jarring. The main full month view shows a Sunday through Saturday layout, with weeks demarcated by thin gray lines. Also in gray are the weekend dates. Instead of "press-able" buttons for dates, Calendar in iOS 7 drop almost all shadow effects for simple black and red dots. It appears that Apple has taken a step back in its design, however, as the month view no longer shows the small tick on dates with scheduled events.
GUI Stencils, Wireframing Kits and Sketching Templates for iPad App Designers It is fundamental that every app designer have a selection of pre-designed and editable UI elements that will allow them to optimize, organize and speed-up work-flow. To help streamline your iPad design work, we have put accumulated a comprehensive selection of iPad specific GUI Kits & Stencils, Wireframing kits, Sketching Templates and fully editable PSD templates that will allow you to rapidly prototype beautiful designed apps. We have also previously published a post that focuses on iPhone GUIs and Stencils, you can view that post here: iPhone Development GUI Kits, Wireframe Stencils and Icons → iPad GUI Design Stencils iOS Design Stencils (OmniGraffle) All of the stencils have been originally created by hand from native or custom created OmniGraffle shapes and grouped for ease of use. the stencils can be easily scaled to new point resolutions and exported to any vector formats supported in OmniGraffle. iOS Design Stencils → iPad Stencil (Omnigraffle) iPad Vector GUI Elements (AI)
Sizes of iPhone UI Elements How to detect the current device size and kind Other dimensions common to all screen sizes: Points vs. Pixels Apple introduced retina displays starting with the iPhone 4. iOS supports high resolution displays via the scale property on UIScreen, UIView, UIImage, and CALayer classes. To refer to an image in your code (or in Interface Builder), use the filename of the standard sized image. iOS will automatically detect and use the @2x version if the device supports it: imageView.image = [UIImage imageNamed:@"button.png"]; Adjusting Sizes Click here to see how to adjust View Frames and Bounds. Additional References Apple Documentation: Points vs.