Can You Love or Hate Your Apps?

Posted by Chris

An old friend of mine recently asked me a question that I had never really considered before. Is it possible for people to have an emotional attachment to software?

Talking about emotions, I’ll keep it concise and only mention arguably the two most common forms, and the ones that happen to contrast the most. Love and hate. Although these are strong words, I’ll use them purely as synonyms to refer to positive and negative emotions a user may have towards apps. Are there any apps out there that I love? I know there are certainly apps that I hate. There are even apps that I use on an everyday basis that I have a love / hate relationship with. Is this the same for everybody else who uses iOS and Mac devices every day? Whether it be for work or for enjoyment - regardless of you being a “casual user” or someone who spends almost their entire day in front of screens of varying size.

Apps, or software isn’t usually something that comes to mind when you think about people connecting to something emotionally. Perhaps this is because they aren’t things that are tangible or physical, where you could certainly say users have an emotional attachment to their iPad or iPhone for example. But without apps, these devices would merely be well designed, expensive paperweights.

So what would the factors be for someone to “love” an app? It simply could be down to what that app does. It could be a medium to keep them in touch with their friends and family such as Facetime or Path, boiling it down to the device’s original purpose - for communicating. Perhaps it could be an app that has proven invaluable to their every day lives like Clear or 1Password. An app that can be used for fun like Paper, or a tool that allows people to work like Xcode or Sketch. Aside from the function, there are other elements to an application that could influence a user’s emotions. Design being one of them, much like someone might have an attachment with a piece of art. It does not matter if the app is ‘flat’, or uses elements of realism in its aesthetic. What matters is that it looks and feels great to use. A simply designed, well polished application could be the defining difference in a category of apps that is pretty saturated and the reason why users would chose to use it ahead of anything else. As with software design on the whole, it goes far beyond the surface of just how it looks. How does it behave? Does it meet our expectations as users? What about the animations that might charm us and stand out enough for us to notice them? Or the sounds of an app that might make us smile? The discoverability of features and shortcuts, or even hidden extras such as bonuses or Easter eggs?

But for the reasons some people might “love” an application, others might “hate” them. Users might not want annoying sounds getting in their way from using the app, or conflicting with the music they may happen to be listening to at the same time. The app might have crazy or broken interactions that prove frustrating to use or it might not have the exact set of features the user expects. Of course, the app could be well designed but implemented badly, causing it to be buggy or to crash which will just anger the user, which from personal experience, has led me to ‘rage quit’ or delete the app from my system.

When designing interfaces, you not only want to make sure the app you’re designing is functional, and usable but it’s essential that it’s a joy to use too. In an ideal world, you want to completely immerse the user into your app so they forget that they’re interacting with a computer. Make things like your application’s copy more human and less like “HAL” from 2001: A Space Odyssey for example. Whilst still very automated, Siri is perhaps the most anthropomorphic example of an app out there on iOS where it tries to connect with the user and even displays humanistic traits such as humour. Whilst this understandably can “freak” some people out for the first time when they use it, it breaks a literary ‘wall’ that their device can interact with them too, instead of it being completely one way. Because of this, it might just encourage people to use Siri on their iOS devices rather than avoid using it completely. Give an app a personality and your users will perhaps look at it in a different light and view it as not just “another app”.

So to answer my friend’s question, yes. It’s entirely possible to have an emotional attachment to software. Gauging an emotional response from users both positive and even negative is certainly better than getting no response at all. It is always going to be an impossible task to be able to please everybody, but if you can get one person to “love” using your app, then you know you have done something right.

I’d be really interested to hear what are some of the apps that you love, or even ones you hate by leaving a comment below or reach out to me on Twitter.

Skeuomorphism and the User Interface

Posted by Chris

Skeuomorphism is something that users have come to expect in apps for iPhone, iPad and even the Mac these days. It’s easily recognisable, and Apple has mainly been responsible for bringing simulacra back to user interface design in the past few years with iOS, and then extending that to the desktop with OS X Mountain Lion. Let’s start by clearing up some confusion and common mistakes about some recent terminology that’s being thrown around.

What does this even mean?

A skeuomorph is “an object or feature which imitates the design of a similar artefact in another material”. This isn’t just limited to user interface design; In the physical world, we find them all around us too. Lightbulbs shaped like the flame from a candle, marble or wood grain patterns printed on linoleum, those useless tiny handles you find on some bottles of maple syrup. Things that are ornamental.

So what’s skeuomorphism then? Aside from being one of the hottest subjects for tech bloggers to write about, skeuomorphism - or a skeuomorphic UI - refers to the overall graphical style of an interface. If done right, things look and behave the same way as the real-life object they are based upon.

What about that other word? Simulacra. This is something that refers to the likeness or similarity of a real object, but behaves in a different way. This what we commonly see in today’s user interfaces when skeuomorphism is implemented into a design badly - or incorrectly.

What isn’t skeuomorphism?

A common misconception is that a user interface that contains realistic-looking elements, but doesn’t actually mimic any physical objects, is skeuomorphic. In reality it’s completely aesthetic. I like to call this “fauxmorphic” and it is because of this that makes it different from something that is simulacratic. A notable example of this is Apple’s Find My Friends iOS app. On the surface it’s clad in a tanned Corinthian leather texture, with stitched on tab and tool bars giving it the appearance of... nothing. As aesthetically unique as it looks, Find My Friends is based on something completely fictional, unlike similarly designed Calendar and Contacts. One of the problems being that there isn’t a real-life physical equivalent for the app which is why the choice to go ahead and use these textures is an odd one. Why did Apple do this? What are they trying to achieve? Well the unique interface certainly makes the app stand out on any iPhone or iPad. It’s one that is easily recognisable and something that has been designed with the average user in mind. It’s an easy app to use and one that looks friendly and uses soft, warm, light colours. Maybe this is was the design brief the Find My Friends designers were given and they worked backwards from there finding that the now infamous leather met the criteria? Who knows? Sadly, it’ll remain one of life’s mysteries along with all the other questionable UI choices to come out of 1 Infinite Loop in the past few years.

comparison

Despite it being a current design trend, skeuomorphism isn’t a new thing. The earliest example of realism in an interface that comes to my mind is Calculator which shipped with the Macintosh in 1984. Even today on the Mac, as well as iOS, the design is still the same as the real-life object. Looking at the wider picture, the very notion of the Desktop was of course inspired by the thing it was named after, what with there being folders, documents, and files on both. The reason for this is simple - to help familiarise new users to something that was a new technology. We’re at the stage where we’ll forever be creating new technologies for users to interact with, so should we still be designing in the same mindset to make everything look realistic so it is easier to use, or can we be more clever than that?

calculator

There are many opinions on this matter for and against this realism. Steve Jobs argued when launching the iPhone that it adds sentiment to the device, whilst the words ‘comfort’ and ‘familiarity’ are also banded around positively. ‘Gimmicky’ and ‘patronising’ have also been used to describe it. Lets look at this from both sides.

Why is it good?

Whether it’s decorated in a linen or paper texture or not, there’s guaranteed to be at least one skeuomorphic element in every single app. It’s something that can’t be avoided. Seemingly simple elements such as buttons and sliders are all skeuomorphic. Even things that aren’t visual like the fake camera shutter sound when taking a photo in Camera or Photo Booth give you that reassuring confirmation that you’ve taken your photo. It’s this kind of comfort that can make skeuomorphism a valuable part of an application’s design. Apps that are super-graphical like iBooks look impressive, and are inviting to the customer in an Apple Store to pick up an iOS device and start flicking through the pages of a book, without having to read a manual or sit through a tutorial. This is a great example of making something feel intuitive because it looks and behaves just like a real book. It’s a real novelty the first time someone uses it and it engages positive emotions in people.

iBooks

When selling apps on the App Store, it is important to remember these two things;

  • Customers will judge your app by its icon.

  • Customers will judge your app by your screenshots.

If they overcome the first hurdle then great! We can talk about this another time, but the second point is the true test. This puts a lot of pressure on developers who of course want to make their app’s interface to look visually appealing and tempting to buy as possible. If you show off screenshots of two similar apps, one with a skeuomorphic UI that looks really polished, and another with standard elements that could be easily mistaken for any other app, then the customer’s decision to buy the nicely designed app over the other one could be simply down to how it looks. It could give them the impression that it’s going to be quick to learn and easy to use because it might look like an app that Apple have designed. Although it is not immediately obvious, Clear is skeuomorphic in behaviour. It looks clean and minimal, but the interface and behaviour is inspired by paper. Such as the fold that opens up when you pinch two cells apart and when you pull to create a new item. Origami came in useful here when mocking this up away from the computer to ensure this looked and behaved as realistically as possible. There are things you can do in Clear that you can’t mimic on a real sheet of paper, but really, that’s one of the many things that makes the app so good.

Why might it not work?

Okay, so skeuomorphism doesn’t sound all that bad if the familiarity helps people understand how new products and applications work, right? Well unfortunately it’s not always pulled off as well as iBooks. Lets take a look at Contacts on the iPad and OS X. This is a great example of an app that is simulacratic. It has the same likeness and similarity as a real address book, but from a behavioural point of view it’s just like any other application. Contacts is the app that conjures up every negative association people have of skeuomorphism as a style. Its aesthetics are there purely as a gimmick and not to serve a prominent purpose. You could argue that it looks more pleasing than default UI elements of a source list on the left hand side with the information in the main view, but as it doesn’t behave like a book it makes it questionable as to why it looks like one. As Apple have managed to carry Contacts’ “branding” through the iPad, web and Mac, the visual consistency remains - but keeping that same interface designed for a touch screen onto the desktop is poor design. This breaks a whole manner of UX conventions on the Mac including things like not using the system font, giving the window gems a different padding percentage, using a non-standard window frame, positioning of the search field, as well as lots of other things that all add up.

Contacts

An app that is slightly closer to home than Contacts is Courier. It’s an app that we have a lot of love for, and spent hundreds of hours designing. At the time we decided to take a different design approach to this app than we have done in the past. We wanted to make it really stand out from the crowd, and base it on the kitsch-y metaphor of sending your files in envelopes to their destination. The app is a lot of fun, and certainly isn’t lacking in character but it didn’t quite work out. Some reviews of the app labeled it as being unintuitive and thought that it was confusing for users - but the design was mostly praised for it’s overall aesthetics. As any good professionals would do, we managed to take away a lot from this, and knew how to avoid this problem for our future applications. The next release for us after Courier was Analog and when you compare the two apps side-by-side, there’s certainly a noticeably different design direction. I think with Courier, our goal was to design a simple application based off a metaphor, whilst with Analog, we wanted to make a great photography tool that was simple and quick to use. Analog’s UI was stripped down to the bare essentials, whilst maintaining the feature-set we wanted to ship with and skeuomorphism appears in the interface with the cutting mat-textured canvas the image you’re editing sits on. After Analog came Clear for the iPhone, which goes to the extreme opposite from Courier in terms of design aesthetic.

Courier

The aesthetic point of view

Looking at the two sides, there are pros and cons to using skeuomorphism, but looking from my personal view, I think that the application’s visuals are one of the major factors in shaping its overall user experience. As a designer, I think that the app should look good, and this contributes a great deal to the user as they are using your app. Graphical elements of the apps should be artistically accurate, respecting things like consistency in colour or even a light source for button shadows and highlights. Textures shouldn’t be in your face and distracting the user from the main content. Compare the images of iBooks and Contacts above. One of those mimics exactly how a book would appear if it were viewed top down, whilst the other looks flat and unrealistic. On the other hand, getting all these things right and creating a good-looking app just isn’t enough, it needs to be sound interaction wise, as previously mentioned. We’re incredibly passionate at Realmac about good design and are all firm believers of Dieter Rams’ Ten Principles of Good Design and its strong relevance to user interface design. It’s no secret that Jony Ive and his industrial design team at Apple are fans of this too and many people are expecting this design ethic to be brought over to iOS and OS X after the recent management shakeup in Cupertino.

Real-world inspiration

What quite a few people might not have noticed is that there’s already several applications from Apple that have been inspired by Braun products that Rams has designed. Music on the iPad, which takes after the Braun SK 4 radio and the iPhone’s Calculator, which was originally based upon the famous Braun ET 66. But not every product designed with a skeuomorphic style in mind comes out following these ten famous design principles. Apps that have been designed with too much clutter will cause confusion and as a result, won’t be pleasant to look at or feel enjoyable to use. People have complained about Apple’s current trend towards UI design, criticising that it majorly contrasts with the simplicity of the device that the apps in question are running on. Especially as in every new product video, Jony puts so much emphasis on how obsessive and meticulous they have been with every minor detail, all to benefit the user and allowing them to focus on their content. And if what they’re focusing on is a mess, it’s not going to make using an iPad or iPhone an enjoyable experience.

Rams

All things considered, I think that using skeuomorphism in your app isn’t necessarily a bad thing. Just make sure you do it correctly, OK? It would be impossible to avoid having any skeuomorphs in an app, regardless of graphical style but it is those familiarities that reassure a user and make it feel like the app uses native behaviours and is in place with its operating system, whether that be iOS or OS X. It’s very easy to go from one extreme to another, and we have experience of both, first with Courier and then Clear, but one of the main things we have in mind whilst designing an application is to ensure that it has character. With Clear, the minimal and clean UI meant that the app could run the risk of feeling cold and sterile, but by adding sentiments such as the use of colour and sound instead of gimmicks, this made Clear the fun app we had set out to design, without feeling the need of decorating it with pointless textures. So by all means, go ahead and use a skeuomorphic UI in your app, but don’t use it simply because a leather texture may look better than a matte gradient. If you think that it fits in well with how the app is used and you can justify your decision - then go for it! But as I previously pointed out, it is a design trend and although trends can appear again, they ultimately don’t last.

It’s probably going to be some time before the whole debate on skeuomorphism settles down - and I’m sure that when it does, it’ll only be when something equally as controversial comes to ground!

As we’ve seen, skeuomorphism is a contentious topic - so if you’ve got any comments feel free to add them below, or get in touch on Twitter - I’m @cjdowner!

Designing for Retina

Posted by Chris

At WWDC this year, Apple announced a new MacBook to the world - the MacBook Pro with Retina display. Of course, this has the same pixel-dense screen as the new iPad, iPhone 4 and 4S models before it. With four times as many pixels than the standard 15″ screen, this gives designers a whole new canvas to work with.

Why does this matter? The extra pixels give room for more details to be shown in the interface such as highly-detailed icons, sharper text that enables beautiful typography, and for photos and images to pop off the screen at a higher fidelity than print.

retina_comparison

When the Retina MacBook Pro was announced, I was excited that one of my favourite hardware features from iOS had made its way onto the desktop, but as a designer I was wondering what the best methods would be to design for it. I was also eager to take advantage of the extra pixels and make our apps look even more stunning! I quickly managed to work out a way that felt comfortable designing Retina apps for the Mac, and one that could also crossover to iPhone and iPad app design.

My Workflow

At Realmac, my setup for working includes a Retina MacBook Pro as a secondary display connected to an external Cinema Display. Even though I have a HiDPI screen at my disposal, the primary application I use for designing (Photoshop) has yet to be updated for Retina screens. My typical canvas size for designing a Mac app is 1200x1800 which means having it at double the size on a 27″ display gets chaotic, so I typically design everything at “@1x”. Almost all of my documents were created long before the announcement of Retina displays for the desktop, even though HiDPI desktops had been rumoured for some time. As soon as the new displays were announced, the first thing I had to do was to make sure our apps could take full advantage of these displays - the first one being Analog.

Vector Shapes

Ever since I started designing, I have been a keen advocate for designing everything in Photoshop using purely vectors wherever possible, with the obvious exception for images needed in mockups. Coming from an icon design background, it has always felt comfortable to me, and gives you a lot of freedom especially when editing, resizing or refining something. Unbeknownst to me at the time, designing using vector shapes also made the designs future-proof, so when it came to making Analog ready for the Retina display, most of my work had already been done! All I needed to do was resize the canvas to exactly double the existing pixel size and save the PSD as a copy. Whilst some designers would be happy to simply double the canvas, and export the Retina assets straight over to their developers, others may prefer to make a number of tweaks and edits in the document before it can be exported. There’s no right or wrong answer with this, and I prefer to test each asset in context and decide which approach works best. Depending on the style of a button, a single pixel border might not look very defined and clickable, but for icons with a lot of little details, it works very well!

icons

In the image above you can see a comparison two different exports. On the left, the layer style values of the icon have simply been doubled - whereas on the right the values have been tweaked. When doubling the values, the distance of an inner shadow would grow to 2px when upscaled, which would look too harsh on a Retina display, so I’ll experiment to see what looks right. In the example above, I tend to find that a distance of 1px works quite nicely here. Designer Louie Mantia wrote in more detail about this on Dribbble

If you’re designing @2x from scatch make sure the dimensions of your shapes and elements are never an odd number of pixels. When you scale down, edges will appear blurry as the edge of the shape will draw on a sub-pixel. Setting up a gridline and subdivision every 2 pixels in Photoshop’s preferences will help you catch this early on.

Testing Graphics

It’s important to test your optimised graphics on a Retina device as early as possible, and I’ve found a couple of ways you can do this. If you’re using MacBook Pro with Retina display, attached to an external display, you can use Preview along with Photoshop. Whilst you’re working on your PSD, also open it with Preview and drag the Preview window over to your MacBook Pro display (making sure to show the image at its true resolution). Every time you save changes in Photoshop, refocus the Preview window and it will refresh to show the updates. This method isn’t exactly ideal, and a workaround in the interim until Adobe updates CS6 so it takes advantage of the new display. Currently, Photoshop will only open in low resolution mode, making windows appearing blurry at HiDPI. Alternatively, if you don’t have a Retina MacBook to hand, but do have a new iPad, then I recommend using Skala by Bjango. Run the Mac app and set it up under Photoshop’s Remote Connections panel, launch the iOS companion and you’ll see your document rendered on the device with any changes you make automatically pushed through.

Exporting Assets with Slicy

Exporting graphics from my mockups used to be one of my least favourite parts of designing an app. It was something that took up a substantial amount of time, and can be particularly tedious. Of course, designing for Retina, you’re having to export two sets of bitmap images for any element - one “@1x”, and another “@2x” that should be exactly twice the pixel height and width of its standard resolution counterpart.

One app that came out recently that helps designers a great amount with this arduous task is MacRabbit’s Slicy. This indispensable app works by dragging and dropping your PSD onto the Slicy app icon, and it will export any layers or groups you’ve told it to in multiple resolutions. It doesn’t matter if you create your graphics at normal or double size, Slicy works for all designers. To get Slicy working for you, rename your layer or group to include “.png+@2x” at the end of its name to create a Retina asset from a standard resolution document, or if your PSD is already at double size, just make sure the element you want to export ends in “@2x.png” to get both sizes. The latter option is my preferred method due to the previously-mentioned upscaling of layer styles. You can read more about the different methods for scaling your assets with Slicy here.

renamed_layers

Display Switching

Of course, with the Mac being able to have external displays there’s the ability to move apps between Retina and non-Retina displays. There’s a threshold the application window has to pass (50% of the window width) before the graphics update on the Retina display, and I’d highly recommend testing how your app responds to being moved between displays.

One issue that we found whilst testing Analog on multiple displays is that there was a slight positioning change in some assets when dragging the window between displays. With Analog this was noticeable in a couple of places. Certain icons jumped ever so slightly, and when we re-generated the Filter previews at double size the image did not match the originals. Both of these issues would have been avoided by bringing Slicy into our workflow sooner - the issues arose when we re-drew items separately from the originals, instead of creating both sizes together.

App Icons

In OS X Mountain Lion, icons have also been updated to take into account the new Retina display. Apple have done away with Icon Composer and ICNS files in favour of “Icon Set” folders. Along with the typical 16-, 32-, 128-, 256- and 512-pixel versions, additional @2x versions will need to be included, much like your application’s UI. In order to create an Icon Set, make a new folder and save off each icon as a PNG with an sRGB colour profile using the following naming convention:

icon_<size>x<size>.png

Then make sure that there are @2x versions to go along side each of the included versions - for example the 1024-pixel icon which appeared in 10.7 should now be icon_512x512@2x.png. You should eventually have icon representations for a complete set which you can reference in the table below. Once you have everything exported, just add .iconset to the folder name to create your icon and add it to your app. It’s as simple as that! One cool feature in Mountain Lion is the ability to Quick Look a Icon Set folder, and there’s even a slider to view all the permutations and variants easily like you could in Icon Composer. Other bonuses of using Icon Sets include that they’re much easier to organise and colour manage. As Icon Sets are only supported on OS X Mountain Lion, you can use the iconutil command line tool to create ICNS files from Icon Sets if you’re targetting OS X Lion or earlier.

icon_size

Final Words

In this post, I’ve covered some important things to consider when designing for the new Retina display and how I optimised my workflow for Retina. If you have any alternate methods or tricks you have been using, or any other thoughts on this post, feel free to leave a comment below or send me a reply on Twitter.

Oh, and one final thing: be sure to check out version 1.2 of Analog on the Mac App Store when it launches. It’s been fully updated for Retina with a load of other great new features, and will be available very soon!