Adobe introduce two new iPad apps but are they useful?

Adobe thinks it is time for us to create wireframes and collages on our iPads, but I am not so sure.

You have to admire Adobe at the moment. They seem to be pushing out new apps at a rate of knots and not just upgrades to the traditional creative suite. In the last couple of months we have seen the arrival of Adobe Edge (for creating CSS animation), Adobe Muse (for building websites without touching any code) and of course their Creative Cloud (making all their Adobe apps available on a monthly subscription basis).

As if that wasn’t enough, last week we saw them release two new iPad apps. These are Adobe Proto and Adobe Collage.

Adobe Collage

Adobe Collage is their attempt to turn your iPad into a moodboarding tool. The problem is there are already some great Moodboarding apps out there and I am not convinced Adobe bring anything new to the table, beyond integration with their Creative Cloud.

Also I must say that although I am a fan of my iPad and use it as my main blogging tool, I am not convinced it is suited to moodboarding. Creating a moodboard requires two things that the iPad is weak at. First, the need to flip between multiple windows as you grab content from different applications and websites. Second, the need for quick and accurate positioning of elements, which is a struggle with a touch screen interface.

Adobe and the other moodboarding apps out there have done a reasonable job, but they are fighting the inherant drawbacks of the device in my opinion. For me, moodboarding will remain a mac based activity.

To be honest, I have similar feelings about Adobe Proto.

Adobe Proto

At face value you might think that Adobe Proto is doing the same as Adobe Collage by replicating iPad applications that already exist. Adobe Proto is a wireframing app and these do already exist on the iPad, most notably iMockups.

However, Adobe Proto is a step beyond what I have personally seen on the iPad to date. For a start it allows interactive wireframes which its competition doesn’t (at least to my knowledge). It also has some great gestures that takes a hand drawn box and turns it into a nicely rendered version. There are also gestures for adding dummy text and even video elements.

All of this sounds good, but I still come back to the question of whether the iPad is the place to be creating wireframes. Like moodboards I see interactive wireframes as something that are produced on a PC where you have quicker and more accurate control over positioning. With basic wireframing I find a pen and paper far more intutive and quicker to produce than using an iPad. However, perhaps I am getting old and stuck in my ways.

Interestingly I find Adobe Muse a far more exciting wireframing tool despite the fact it was not designed for that purpose. Adobe Muse is meant to return us to the days of building websites without touching code. This in my opinion is fundamentally flawed in a world where websites have to accommodate a range of devices. However, it is ideal for quickly throwing together an interactive wireframe that you can test with. I will certainly be having a play with it to see if it can be used in that way.

So what do you think? Am I just a grumpy old man who doesn’t like change? Would you produce moodboards and wireframes on the iPad? Share your thoughts on Adobe’s new apps in the comments.

An alternative approach to personas

Personas are a great way to help visualise the people you are designing for. However, sometimes the traditional approach can be a bit overwhelming. Fortunately there is an alternative.

I am a visual person, so when I’m working on a site I find it incredibly useful to picture the person I’m designing for. That is where personas come in. They make the user real and that to me is invaluable.

That said, some personas can get a bit wordy for me. They go into so much depth about the persons likes and dislikes, their internet experience and family situation, that they loose their impact. They stop being an easy way to keep the user in the front of my mind.

That is why I fell in love with this alternative approach to personas. Instead of lots of text they consist of two images. One image of the person, and one image of a cross section of their possessions. It is amazing just how much a persons possessions say about them. It is enough to get a sense of who you are designing for.

Jackie Diptych

I am not suggesting these personas replace more detailed versions, as the additional information they provide is invaluable. However, these are a nice compliment and one I may well consider on my next project.

So what do you think? Would you use this approach? Does it tell you enough about the person?

Running a successful web design business

Running a web design business can be an isolating and challenging role. I therefore run a workshop to give a chance for business owners to come together and discuss these challenges.

For sometime now I have been running a full day workshop called “Running a successful web design business”. It is a workshop that ties in closely with my book “Client Centric Web Design,” but is obviously much more interactive. I love running the workshop because I always learn as much as I share with the attendees.

Previously I have avoided sharing my slides from this workshop. This is partly because slides don’t really capture the essence of the day and partly because my previous slides were so vague that they were meaningless.

However, I have recently reworked the slide set and feel they are now worth sharing. I hope you find them useful.

If looking through the slides sparks any questions or comments, please feel free to post them in the comments.

Contributing to the web

For me the web has always been about contributing rather than consuming.

Don’t get me wrong I learn a huge amount from the web everyday. However, the web was always meant to be a medium you contribute to, unlike reading a book or watching TV.

For me contribution is in the form of writing blog posts, recording podcasts and giving presentations. For others it is participating in open source projects or sharing code and designs.

However, there are many who don’t contribute at all. This is not because they are bad or lazy people. It is because they either think they have nothing to contribute or because they fear getting it wrong.

If that is you then I would encourage you to read a post on Smashing Magazine about moving the web forward. One paragraph in particular says it all:

Don’t be afraid to make mistakes (because that’s how we all improve). It’s absolutely okay for you to not be a complete expert or authority on a topic. Share what you do know because it has the potential to help many other developers and designers out there.

Don’t rely on others to contribute. Share what you know, for somebody that might be exactly what they need to hear. No matter what your skill level, you have something to contribute.

 

Starter kit for web design freelancers

I don’t seem to be able to shut up about working with clients at the moment. Not only is there my book “Client Centric Web Design,” I also cover this subject as part of a series of videos I have recorded for Sitepoint.

These videos form apart of Sitepoint’s superb “Kick Start Your Web Dev Business” course, which I can highly recommend if you are starting out freelancing.

I have to say I find recording these videos painfully embarrassing, but apparently others find them useful. Here is the first video, which is particularly embarrassing because I talk about how great I am!

The undeniable power of collaboration

Play

The main theme in my latest book “Client Centric Web Design” is one of collaboration. If you want happier clients, better websites and more job satisfaction, you have to learn to work as a team with your client.

Interestingly, I am not alone in this point of view. A post on Smashing Magazine, perfectly articulates the point.

Set the expectation from the beginning that you will work with stakeholders collaboratively. They will help you think through the design at every step… If the client is unwilling or unable to spend time and energy on the design as you develop it, find another client. A client who is too busy to get involved in the process is a client who doesn’t care…

Collaboration is essential to great design. No one person can think of everything or always have the best ideas for every aspect of a product. It takes a group to make this happen. This might require you to occasionally browbeat the client into being available for frequent discussions on new and developing ideas, but the result will be infinitely better.

For me this is the key. Without it, a project will at best produce a mediocre website. However, I am interested in your opinion? How do you work with clients? Do they help or hinder your projects? Let me know in the comments below.

Making web forms conversational

Play

Are you caring about your web forms?

I came across this great article on Smashing Magazine from last November talking about web forms. The post is stuffed with great advice, but the following leapt out at me:

A form is a conversation, not an interrogation.

Order the labels logically, reflecting the natural flow of a conversation. For example, wouldn’t it be weird to ask someone their name only after having asked a number of other questions? More involved questions should come towards the end of the form.

It reminded me of the excellent signup form on Huffduffer. This signup process recognises that web forms should reflect the natural way we converse. Filling it in feels more like a conversation and less like a chore. It engages, while many forms just demand input. Websites and computers generally can be impersonal and cold. We need to work hard to counteract this tendency. Forms are one way we can do this.

Huffduffer signup form

Have you seen other forms with a friendly and conversational tone? If so share them in the comments.

Social Media is a user experience issue

Integrating social media with our website should be more than just slapping some social media icons on the homepage.

A while back I wrote a post asking whether your website played nice with social media. It turned out to be hugely popular and led to me speaking on the subject at this years Future Insights in Vegas.

What follows is a run through of that presentation where I expand on the points I made in my original post. I hope it inspires you to introduce better integration between your website and social media channels.

Stop asking users to register before checking out

Play

One of my biggest frustrations with the ecommerce sites we work on, is when clients want users to register before they can purchase.

Users do not come to your site to register. They come to purchase. Even though there is very little difference between the two activities (to make a purchase you have to provide all the same information as registration, with the exception of a password), in minds of users registration is a distraction.

It was therefore refreshing to read a post on econsultancy driving this message home. The author writes:

Making customers register before they checkout is a barrier to purchase, yet many online retailers have yet to learn this lesson.

He goes on to say:

A recent Econsultancy / Toluna study found that 25.6% of online consumers would abandon a purchase if they were forced to register first.

The post goes on to outline a series of alternatives. However, interestingly it fails to mention my preferred approach. I recommend that ecommerce sites ask users to register when they have completed their transaction. This is the point where the user is thinking “what next” and provides a superb opportunity to layout the benefits of registering.

Of course, the problem with not forcing registration is that users effectively create multiple accounts. This is not great from a marketing and data hygiene point of view. However, the post makes a suggestion for dealing with this too based on Amazon:

Amazon has an interesting example of how to handle this. It will allow me to create a new account with a previously used email address, but warns me that the existing account will be disabled.

If I’m a reasonably regular customer who has simply forgotten their password, this will convince me to go down the password reset / reminder route and avoid losing my stored billing address and payment details.

However, if this is an old, unused account, then allowing customers to go ahead anyway avoids the pain of resetting the password.

Do you build or run ecommerce sites? How do you deal with the issue of registration? Is there a better way? Share your approach in the comments below.

The truth about content strategy

Play

When I ask you about content strategy, what are you thinking? Are you thinking about populating your new website with copy or are you thinking longer term?

When we meet with clients to ‘redesign’ their websites, they are often so fixated on the challenges surrounding the copy for their new site, that they fail to think longer term. This is a dangerous mistake as Kristina Halvorson makes clear in an article she wrote for .net magazine:

Many people assume that content strategy is about content creation – but in fact, that’s the easy bit. It’s what Halvorson calls the “messy stuff” surrounding the long-term management of content that forms the real challenge. Essentially, she explains, it’s all about asking the right questions early on in the process – “Who is the content coming from? Who owns the content? How will that content be maintained and developed after launch?”

“So really it’s about working to move organisations’ focus away from launching content and towards looking at content as something that lives within a long-term life cycle. And that requires a longer commitment than just a copywriter and a project manager for the website launch.”

This is a huge issue! We recommend that our clients create a new position in their organisation, one dedicated to content strategy – a content editor.

This person is not only responsible for initial content population but also for the ongoing quality of content on the site. They are responsible for editing what is added but also (and potentially more importantly) for removing content that is no longer helpful.

If you haven’t already, now is the time to consider the long term management of content on your site. As Kristina says:

Who owns the content? How will that content be maintained and developed after launch?

What is your approach to the management of content? Is an editor the right approach or is training of content contributors more important? Lets discuss the best way forward in the comments.

Even website owners should care about code

Play

Most of the time when a web designer talks to a client about code, the clients eyes glaze over.

This is understandable. Code can be pretty intimidating. In fact many web designers legitimately argue that clients don’t need to understand the code on their site.

Although there is no good reason why a client needs to know anything more than some basic HTML (if you don’t then its time to learn) they should still discuss code with their web designer.

The reason it is important to have this discussion is because how a site is coded has business repercussions.

Take for example a recent conversation I had with @sheerman. He tends to focus on coding extremely lean, clean code. This is ideal if a site has to download like lightening. However, it also makes changes to the site slightly more cumbersome.

If you want to constantly update your website, including moving elements around or making design changes, then you maybe better taking the approach favoured by @emerritt, another designer at Headscape. His approach is much more flexible but does result in slightly more code that could slow down a site.

Web designers argue endlessly about which approach is best. In reality the answer depends on the clients needs. That is why sooner or later web designer and client needs to discuss code. They don’t need to get into specifics, but they do need to discuss issues such as whether flexibility or speed is more important.

Of course that is just my opinion. What do you do? Do you discuss coding with your clients? If you are a client does discussing code terrify you? Let me know in the comments.

A different approach to web design education

Play

A friend of mine is a mechanic. Recently he took on a new job working with young people who have failed to fit into the normal educational system.

He has little in the way of curriculum. His objective is a simple one. He is to engage with these young people and get them excited about mechanics in whatever way works best.

His solution to this challenge is an elegant one. He makes use of his students natural curiosity, following it wherever it takes them. If they want to learn about bikes, he works on bikes. If they want to understand how an engine works, they take one apart.

He combines this with real world experience. If they repair a car and make some money from it (within the limits of being unqualified), they get to keep the cash.

This struck me as a great strategy for kids that just didn’t respond to our traditional and extremely inflexible education experience.

Learning from medical schools

This combination of curiosity and real world business experience was further reinforced by a book I am reading called Brain Rules. In this book the author John Medina points to Medical Schools as an alternative and potentially better way to learn.

Medical schools combine traditional academic teaching with real world patient care. They often have a strong research wing that allows the curiosity ignited in the learning process to flourish into new areas of research.

The answer to web design education?

It strikes me that maybe this is the answer to the education problems we are seeing in web design. Although there are certainly some good courses out there, many are teaching hopelessly out of date techniques. As web design employers we often claim that new graduates are not equipped with the real world skills we need. Equally many graduates find it hard to get a job because they don’t have the experience many employers demand.

What if we took a page out of the medical school book? What if web design courses were effectively run as web design agencies? They would take on real clients with projects run by seasoned professionals and developed by students.

These professionals would also teach more academic classes based on their real experience of working with clients, unlike many traditional lecturers who have little in the way of current industry experience.

Money earned from working with commercial clients could be used to help reduce course fees, so making the course accessible to more students.

Finally in much the same way Google provide 20% time, these courses could leave room for personal projects and research. This would introduce the much needed innovation that is the lifeblood of our industry.

I am the first to admit I know nothing about web design education. There was no such thing when I attended university. However, it strikes me that a combination of real world experience and giving students time to explore their own curiosity (in terms of personal projects) could produce the next generation of web designers to carry innovation forward.

So would it work or am I being naive? Are you a lecturer, if so what are the problems? Are you an employer, do you think it would help the skill deficit? Are you a student, would you go on a course like this? Are you a client, would you employ a web design school? Let me know in the comments below.

Turn your 2D designs into 3D product shots

There are some tasks that are as fiddly as hell to do in Photoshop. An example of this is applying textures to 3D objects.

I had to do this recently when working on the collateral that supports my new book “Client Centric Web Design”. I had to superimpose my book cover on a real book and also show a page on an iPad. In both cases getting the perspective right turned into a real headache. Something that should have taken seconds, took far too long.

My dodgy perspective work in Photoshop

I am the first to admit that this is probably a sign of my outdated Photoshop skills, but even taking this into account there has to be an easier way.

It turns out the answer is a website called PSDCovers. The site includes a large range of 3D objects from books to iPhones. Each item has an associated Photoshop action.

To put your texture on the object, download the action and run it in Photoshop.

There are two steps with each action. The first produces a flat template that you post your texture into. This template also includes detailed instructions on each part of the template.

Example of a flat template

Step two is where the magic happens. By running the second part of the action it transforms your flat template into the final object. It takes a few seconds to run but the results are amazing. Best of all the object has a transparent background meaning it can be easily added to any image or combined with other objects.

The final example book cover

I am sure that a Photoshop expert could do this easily. However, I see this as a superb way for non Photoshop experts (clients) to apply their branding to a range of objects.

Client Centric Web Design on Sitepoint Podcast

Play

The guys at the Sitepoint podcast invited me onto their show to discuss the upcoming season of Boagworld where I introduce Client Centric Web Design. The new season starts tomorrow, but if you would like, a taster of what we are going to cover and what is included in the book then check out the interview.

Show summary

Kevin and Paul talk in some detail on how we need to make sure our communications with our clients put them at the center of the design process, have them feeling a sense of ownership of the project, and use all their knowledge and skills as well as ours.

Find out more about the new season of Boagworld

Why this blog sucks and a better alternative

Do you wish we posted more techie articles here at Boagworld? Would you like some more meaty web design content? If so, read on.

Many readers of this blog find it immensely frustrating. Sure, you get great content about running a successful website, but I stoically refuse to write about technical or complex design issues.

This, of course, is intentional. All along I have aimed this blog squarely at those who run websites but don’t necessarily know a lot about web design. When I do talk tech or design, I do so in a way that anybody can understand.

Of course if you are a web designer this can become frustrating. You want technical stuff and design advice. Fortunately the guys at Headscape are here to help you out with a new site called The Barn.

The Barn is a blog written by some great people at Headscape such as @cargowire, @leigh, @edmerritt, @webdesignchris and @bobscape.

It covers all of the more ‘web design’ related topics that don’t fit on boagworld. Subjects such as:

It also has some great free downloads including

Not only does it have loads of great content it also has an amazing piece of what I can only call Pixel Art. It is worth checking out the site to play with this header graphic.

The pixel art on the new Barn website

Inevitably there will be some overlap with boagworld content and when that happens we will be sure to repost it here. However, if you are a web designer and interested in what we get up to at Headscape then this is the blog for you.

Visit the Barn

The secret of successful publishing

Play

I recently ran a workshop on content strategy and social media. The reason I combine these two topics is because they are so closely linked. In today’s connected world, publishing has changed. It is no longer about broadcasting. Today publishing is about a conversation, as is beautifully expressed by Mandy Brown in her recent post Babies and Bathwater.

We can no longer think of publishing as a broadcast medium. It isn’t, not anymore. The web requires that we listen and converse as much as (if not more than) we ship.

Why then do so many publishers continue to broadcast rather than actively engage users? The reason is simple, as Mandy goes on to explain:

Of course, supporting a community is hard work, and it isn’t cheap. It’s expensive not only in time, but in spirit: you have to care about your readers.

For many nurturing a community is just too much effort. Unfortunately this is not an option on the modern web. Users are out there talking about you elsewhere. If you ignore them you risk alienating them or even missing a potential PR nightmare. However, if you nurture a community these very same people can become your best advocates.

What route have you chosen?

Practicalities of using animated gifs

Have you seen the cool new generation of animated gifs? Want to do the same but are worried about download speed? I am here to help!

Play

Earlier this month I wrote a post encouraging you to reconsider the use of animated gifs. I argued that animated gifs can create truly stunning visual affects reminiscent of the moving pictures in Harry Potter.

Along with many others, Derek from the comments argued the images were too large to download.

I think this is an issue of page weight. The one for the guy adjusting his jacket is almost 800k.

This is a fair comment and the examples I showed were extremely large. In this post I want to suggest some ways of creating and then optimising these animated gifs to minimise their file size.

Creating your animated GIF

Although you could create an animated gif from pretty much any digital video, using an iPhone app called cinemagr.am is much easier.

Cinemagram

Creating an animated gif couldn’t be simpler in Cinemagram. First, record a short video of whatever you wish to animate. Second, select the elements within the image that you wish to animate (leaving the rest of the image static). Finally, apply filters to the image, such as making it black and white.

This works flawlessly. Creating the gif is the easy part. The hard part is working out what to animate. The biggest challenge with animated gifs is creating a feeling of movement without recording a massive video. It needs to loop in order to create this effect, which means choosing the subject with care.

If keeping the file size down is important to you, only animate a small portion of the overall image. The more of the image area that animates, the larger the file size.

Although Cinemagram is great at creating animated gifs, it is terrible at optimising them. When I saved my first gif, it came out at a whopping 3.9mb! Not the kind of thing you can include on a website.

Luckily with a little work I managed to get that file size down to only 114k. This was with little change in the animation or image. Let me explain how.

Optimising your animated gif in Photoshop

You maybe unaware as animated gifs have fallen out of fashion, but Photoshop has a built in animation feature. If you open up an animated gif you will see a timeline of your animation.

Photoshop timeline

By taking 5 simple steps in Photoshop I was able to reduce the file size considerably. These steps were:

Crop wherever possible

When it comes to gifs every pixel counts, so crop the image as tightly as possible. Jpegs have made us a little lazy in this regards because they compress in a different way. But with gifs you must minimise the number of pixels downloaded. This means you might also want to consider resizing the image too.

Remove unnecessary frames

The timeline in Photoshop allows you to see all of the frames in the animation. I found that Cinemagram produced far more frames than necessary to give the illusion of movement. The same is true with video. The eye can be tricked into seeing smooth movement with very few frames, so experiment with taking frames out and see what it looks like.

Photoshop timeline with delete highlighted

In my experiment I managed to go from over 80 frames down to just 14 and achieve almost exactly the same effect.

Each frame removed will significantly reduce the file size.

Only animate portions of the picture

I suggested only animating a portion of the image to keep the file size low. Unfortunately Cinemagram doesn’t do a great job at minimising the amount that changes. Luckily you can do this yourself in Photoshop.

Instead of updating the whole image for each frame, only update the elements that have changed.

Cinemagram places each frame of the animation on its own layer, which makes things easier. Pick one layer to be your default background layer. This will be the background on top of which you animate. It should be turned on for every frame of the animation.

Photoshop layers showing multple frames

For each frame, delete elements that do not change from your background layer. This deletes data that would have otherwise been stored in the final image. This data is already contained in our background layer so doesn’t need to be loaded for each frame.

Make use of delays

If you want to pause the action in a video, you insert a number of frames showing a static shot. Each of these frames increases the file size. However, this isn’t the same with animated gifs. Instead of adding extra frames simply tell the file to pause for a predefined period on a specific frame. This will avoid the need for extra frames to be downloaded so reducing file size.

Photoshop timeline with frame delay highlighted

Saving your image

Finally, when saving the animation don’t forget to experiment with limiting the number of colours. You can often significantly cut the number of colours so reducing the file size.

Photoshop Save For Web Dialogue
Of course the final image is never going to be as small as its jpeg equivalent. However, used sparingly animated gifs can add some life to your imagery.

What is more, it maybe possible to initially load a static image of the first frame. The animation would then be loaded after the page has been displayed. However, this lazy loading is techie stuff beyond my humble abilities :)

Are you forcing your users into social silos?

As web designers and website owners we need to think long and hard about how we are using social media, especially how we introduce social elements into our websites

Play

As web designers and website owners we need to think long and hard about how we are using social media, especially how we introduce social elements into our websites.

A while ago I wrote a post on better ways to integrate social media into our sites. At the time I thought I was proposing some healthy next steps that progressed things further than slapping on some social media buttons or javascript widgets. However, my thinking has moved on and I am becoming increasingly convinced we need to radically shake up how we encourage social interaction online.

Social is an after thought on most websites

The problem is that social media is often an afterthought. In many cases it is just bolted onto the side of an existing site, rather than considered from the start.

In his talk for UX week, Paul Adams from Facebook explained the concept of “social by design.” This principle puts social interaction at the heart of the web design process. It recognises that humans are social beings who turn to their trusted friends for advice on everything from what clothes to wear to which websites to trust. He proposes that we need to build websites from scratch with social in mind rather than bolt it on afterwards.

Why boagworld (and your site) isn’t social

Take for example this site. At face value it appears pretty social. It has a forum, blog comments, twitter features etc. However, in reality it is a disjointed experience that has been added to the site rather than integrated into its heart.

The problem with boagworld.com and many other sites is that it is technology driven rather than socially focused. Various disjointed conversations are occurring on different platforms. If somebody wants to engage with me or other boagworld followers they have a bewildering plethora of options. They can:

  • Tweet.
  • Post to my facebook page.
  • Post a comment on the blog.
  • Comment on an audioboo.
  • Participate in the forum.

Because different technologies drive each of these methods of contribution they all exist as isolated silos. A user who follows me on twitter will never see the conversation on the forum. Equally those on the forum are not going to see conversations happening in the comments. The discussions are fragmented.

A vision for a social future

The solution is to create an integrated experience where contributions on one channel will be visible on another. The question is, what would this look like in practice?

For a start a forum and blog could be integrated. When I publish a new post it could start a new thread on the forum. That thread would include reference to the original blog post, but allow responses to be made just like in an ordinary forum thread.

Equally, any replies to the thread would appear as comments below the blog post. A user could share their thoughts either on the blog or in the forum and they would appear in both.

Another great feature would be to turn an existing forum thread into a post. This would allow me to summarise the thoughts within a thread as a post and attach the thread as comments. This way community members wouldn’t just be responding to posts but generating new ones.

New threads and posts should also automatically appear in twitter streams or on Facebook pages. However, users should not be forced to go to the site to contribute to those conversations. Replies to that update should automatically be pulled back into the thread without the user ever having to visit the site let alone login.

A setup like this would enable users to participate in discussion using whatever tool they wished without missing anything. It is an approach focused around free flowing discussion and engagement, not around the technology available.

Why the fragmented social model exists

So why haven’t I adopted this approach on boagworld. The short answer is that the tools do not support it. To achieve a scenario such as the one listed above would require a bespoke build, which is beyond what my time and budget will allow.

Vanilla Forum

Vanilla Forum

My hope is that those who build social tools will recognise a need for closer integration and setup. Already companies like Vanilla are looking at better ways to integrate with WordPress, Twitter and Facebook. However, I believe we have someway to go before social engagement is not limited to individual silos.

Picking fonts sucks, but there is an answer

Picking fonts in Photoshop sucks. The preview of fonts in the font menu is so small that they are pointless. You are also faced with an overwhelming list with no ability to compare and contrast.

The font menu in Photoshop

Fortunately, there are apps that specialise in managing fonts and font selection.

Some of these apps look pretty amazing, like Fontcase, which not only allows you to manage fonts but also preview their use on any website.

Fontcase

Unfortunately for me and many like me, tools like this are a sledgehammer to crack a nut. I am not a designer anymore, but I do need to pick fonts fairly regularly. I don’t want to pay a lot of money for a tool to let me do that and am not interested in the majority of functionality these apps provide.

The solution to this problem is a simple app called Font Picker. At only £2.99 you won’t get the functionality of more expensive apps. However, you also won’t get the complexity.

Font Picker

Font Picker provides large previews of all the fonts you have installed and allows you to quickly narrow down your selection until you find the perfect font.

I am sure I am not the only one that would be more than willing to pay £2.99 to get nice big previews of fonts and the ability to compare my options side by side.

Help your users, be focused

Do users get your app? Are you confusing them with too many features?

Play

We are currently helping the guys at Buffer redesign the UI for their native iPhone application. It’s a fun project, primarily because Buffer is a tool I use everyday.

We had an interesting conversation about focus and vision that I wanted to share with you because I think it has lessons for all of us.

In case you don’t know Buffer allows you to add your social media updates to a ‘buffer’ that then posts to various networks throughout the day. Updates to your buffer can be done via browser extensions, email, third party apps or their own Buffer app.

Bufferapp.com

While working on the wireframes for the app, Rob Borley (our mobile expert) couldn’t shake a nagging feeling he had about the app. He kept worrying that the app lacked focus.

Apps need to be extremely focused

This is an important factor in app design. Successful apps are those that do a few things well and allow the user to instantly grasp what the app does.

Eventually we pinned down the problem. Because there was a prominent button for posting to your social networks it felt too much like a Twitter client. This was a problem because it was a crap Twitter client! You can’t view your timeline, reply to other messages or DM people.

This of course was by design. Buffer is about managing your buffer of upcoming updates. It does not want to be a full twitter client because there are so many brilliant ones out there.

The trouble is the app felt like a twitter app and so left the user with the wrong impression. To solve the problem we had to refocus the user interface on management rather than posting. By doing so you made it clear what the app is and more importantly what it is not.

The lessons for us all

The lessons here are simple:

  • Don’t try and be something you are not. For example too many website owners add Facebook like features to their sites thinking that users will like that. Instead they frustrate people because it’s not as good as Facebook.
  • Focus on one thing and do it well. Related to the point above, if you attempt to do too many things you will find it impossible to compete with those who focus on one or two features. It is better to do one thing really well, than offer a suite of mediocre features.
  • Make it clear what you do. Users should be able to glance at a user interface and instantly know what it is you do. Don’t make them work to understand your offering.