Learn more about user experience, web development and digital marketingView training courses

Our thinking

Dear camera manufacturers,

I’ve been one of your loyal customers. I’ve had a Canon SLR camera for more than 15 years, and played around with all sorts of cameras since I was 2 years old.

But today I find myself less and less inclined to take my camera out for a spin, and that’s not for a lack of inspiration. You’re probably already aware that people haven’t stopped taking photos — they just use their smartphones to do so.  According to some sources, shipments of standalone digital cameras almost halved in 2013.

I don’t want this to continue. I’ve spent some of the best moments of my life taking photos of people I love and objects that impress me. I believe that even when everyone has a smartphone with a great camera, there will still be a place for standalone cameras. But to reach this place, you need to change. Here are 5 things you can do:

Fix your chargers

In a recent trip, I had a bag stolen with my camera charger inside. Looking to buy a new one, I discovered that the official one from Canon costs at least £30. It’s a bulky box and comes with a very long cable that only fits UK plugs:


So I bought this one instead:

Yes, it’s a made-in-who-knows-where knockoff. But it cost £5.99, it’s slightly more compact than the Canon one, and it comes with UK/EU/American swappable plugs as well as a car adaptor. Guess what, camera manufacturers — a lot of your customers are likely to use your cameras when travelling, and hate having to get extra adaptors.

While we’re at it, why don’t all cameras support charging via USB (since they tend to have a USB port anyway)?

Make disposable cameras

“Disposable cameras?” I hear you say. “Didn’t these die together with film?”

Let me explain: I love my iPhone camera and the millions of interesting things I can do with it,  shooting time-lapse videos for example. But would I leave my iPhone unattended in a corner to shot a time-lapse? Would I strap it on my bike to get an interesting viewpoint? Or would I happily take it out and use it in the rain? Definitely not, as I don’t want a £500 piece of kit to be stolen or damaged.

What I’d love to have is a cheap camera that I can hang off a tree or strap on my bike and I won’t cry if it breaks or goes missing. That’s what I call a “disposable” camera, and it already exists – I bought it for £26.99 on eBay and it’s not made by any of the big camera brands.

The 808 #18 keychain camera (pictured right) shoots decent-quality 720p video and also has a time-lapse feature, looping video, and motion-activated triggering (so you could use it to photograph visiting wildlife for example).

It’s tiny and weighs less than 20 grams. People have hung it from helium baloons, flown it on kites, attached it to quadcopters and used it for underwater filming.

When most images and videos are made to be shared, a unique viewpoint matters more than image quality. You can tap into this by making cameras where such viewpoints can be achieved without much risk.

Build a platform, not just individual products

Not many people realise that today’s digital cameras are essentially small computers with a lens and an image sensor bolted on. Those who realised have gone on to hack cameras and load their own custom software such as CHDK and Magic Lantern. This has allowed photographers to do all sorts of amazing things, from capturing lightning strikes to amazing astrophotography.

Why should this only be available to those willing to take the risk of tinkering with their camera? Why don’t you provide a better way for people to maximise their creative use of your hardware? If a $150 smartwatch can have its own app store, why can’t your $500+ cameras?

Promote your products better

I just went into a camera manufacturer’s website and clicked on the first product I could see. The following screenshot summarises everything that’s wrong about promoting camera products today:

Remember, your website is no longer just a brochure. With high-street camera shops shutting down, websites are one of the few places where your potential customers can experience your products. Fortunately, it’s not that hard to fix your websites — you just need to:

  • Show how your products fit in the context where you want them to be: in your customers hands and bags
  • Stop talking about features with obscure names, and start talking about what these features help your customers shoot better photos (“you can control it via your iPhone” vs. “it has built-in Wi-Fi”)
  • Use before/after photos to show how each feature works (if the feature doesn’t have an impact that’s easy to spot in a photo, why are you even talking about it?)
  • Show full-size, zoomable photos taken in a variety of situations where you expect people to use that camera

Remind people to use their cameras

Even with your best efforts to create and promote an amazing product, we’re all humans living in an age full of distractions. So there’s still a chance that we end up buying a great camera, only to leave it sitting on a shelf for an extended period of time. Such disengaged customers are much less likely to feel they get any value out of their camera, let alone buy another one in the future.

I’ve already mentioned that your cameras are little computers, and many of them now come with built-in Wi-Fi. Which means that they could be easily associated with a user account, and collect usage statistics. And if they sit idle, they could remind customers to use them.
Imagine if after a period of inactivity cameras could send their owners an email. The purpose of that email would be to provide a range of ideas to make a photographer excited enough to pick up a camera again.

Based on what your camera manufacturer knows about you, they could propose:

  • Events near you with a photographic interest (such as art exhibitions or music festivals)
  • Photographic challenges and competitions that you could take part in
  • Features of your camera (such as macro photography or slow-motion video) that you haven’t had a chance to explore yet

So, here are a few things you can do. But you need to be quick — some of these opportunities won’t last for long. I, for one, will be watching closely and hoping my current camera won’t be my last one.

Kind regards,

Alex

A few months ago, I spoke at City University London about Wireframing for Responsive Web Design where I proposed that paper could be a useful tool for responsive design. Since then, I haven’t had many chances to try the technique I proposed hands-on, but a suitable opportunity came up recently when we decided to look into making our own Webcredible site more responsive.

I helped facilitate a workshop to start our responsive design project, and I decided to introduce the idea to my colleagues taking part in the workshop, both UX designers and internal stakeholders. As we were adapting an existing site, we already had a baseline for the content we could include so I started by printing out screenshots of some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.

Here’s some examples of what came out of that workshop:

Linear layouts of Webcredible pages

What we all really liked about this method was the speed (as we didn’t have to sketch much from scratch) and the flexibility of rearranging pieces of paper before committing to a final solution. The developer in charge of delivering this project also found it helpful to have a visual overview of the intended mobile result based on the existing content. Of course, there’s some limits on how much interactivity you can try to convey through paper, but this didn’t stop us from trying. One of the tricks I really like is this folded piece of paper showing how a long list of tags in our blog might be collapsed into a drop-down menu:

Folded piece of paper signifying a drop-down menu

To see more high-resolution photos (and a sneak peek at our upcoming responsive site), take a look into our responsive design Pinterest board. And let us know what you think in the comments below – would you consider using paper for responsive design?

 

In the beginning there was Clear - the iPhone app that turns managing your to-do list into a game of gesturing around the screen (if you haven’t seen how this works, you can watch a demo video of the app). At first I thought this was a folly that was quickly going to fade away. But a few weeks later somebody decided to redesign another basic app, your humble calculator, to also use gestures. Rechner app prides itself on being  “the world’s first gesture based calculator” and makes you perform gestures instead of tapping buttons for the basic act of adding 2 numbers. Its creators have also created a pretty demo video that makes adding numbers with gestures appear as compelling as performing magic.

What neither of these videos shows is that before you start using either of these apps you’ll need to go through a couple of tutorial screens to find out what gestures you can use and what they do. A tutorial before I can add numbers or scribble some to-dos? Thanks, but no thanks!

Here’s what these tutorials look like:

Tutorial screen showing a gesture for the Clear appTutorial screen showing gestures for the Rechner app

The first screen, one of the 7 tutorial screens shown when the Clear app is first launched, teaches you the elaborate gesture that the app’s creators have thought up for going one level up. You may have noticed that you need to hold the phone in one hand and pinch with 2 fingers on your other hand to perform this gesture. That’s something most other apps accomplish by using a standard ‘Back’ button, and you can usually tap this button with your thumb on the same hand that you’re using to hold the phone. Perhaps Clear should be branded “the world’s first two-handed to-do app“?

The second screen, “explaining” how to use the Rechner app, assumes people can decipher the gesture notation and understand that you need to ‘swipe right twice‘ to multiply. I’m not sure how this squares up with Rechner’s creators’ claim that their app is “200% more efficient”, since on a standard calculator you’d only have to tap the multiply button once.

So what do these apps offer in exchange for having you learn & perform all these gestures? On Clear, most gestures could be replaced with a couple of buttons at the top of the screen for adding & editing tasks, and going back to the previous screen. Sure, this would have meant that the screen could show 1 less to-do item, but that’s hardly a tragedy. On Rechner, removing the action buttons from the calculator keypad leaves more space to make the number buttons bigger, but did anyone complain that they were too small in the first place? The only thing both apps consistently offer, is the potential for mistakes. When you can perform gestures anywhere on the screen, and most gestures do something, it’s very likely that you’ll end up accidentally activating one. And because gestures don’t come with labels, you won’t know what you’ve just done.

So, dear app designers & developers, please stop this gesture madness. I know gestures look cool, but they’re also:

  • Difficult to discover – do you really want your app to start with a tutorial?
  • Hard to remember - unless they map to a natural action
  • Easy to accidentally activate and cause confusion
  • Not making an app more efficient - it takes at least as much time to drag your finger across the screen as it takes to tap a button

There’s many good use cases for gestures (e.g. for directly manipulating objects on a screen, or for secondary actions), but reinventing the calculator or the to-do list isn’t one of them.

Have you seen any great or terrible uses of gestures? Leave us a comment, it’ll be interesting to see what else is out there…

UXCampLondon presenters pick their slot in the schedule

If there’s something else that’s abundant in London this summer apart from rain, it’s interesting UX events. Last Saturday, three members of the Webcredible UX team (myself, Yeevon & Richard) braved the rain and made their way to an annual fixture of the UX events calendar, UXCampLondon 2012. If you’ve never been to UXCampLondon, the best way to describe it is as the ‘open-mic’ version of a UX conference. There’s no pre-set schedule, and all attendees are encouraged to pick a time slot and host a presentation or discussion. Invariably, this results in a widely varied schedule covering everything from the core to the fringes of User Experience. Some of the sessions we liked this year were (in no particular order):

We’re proud to have sponsored UXCampLondon this year, and we’d like to send our thanks to all the volunteers who put a lot of hard work to make it happen. All the best for UXCampLondon 2013!

In the past year, I’ve trained more than 100 people in Axure through our Webcredible Prototype in Axure training course. I’ve had the chance to watch them make their first steps in laying out a page and, while Axure doesn’t have a particularly steep learning curve, there are a few elementary mistakes that beginners seem to make. Here’s a list of these mistakes and, more importantly, how to avoid them

1. Adding unnecessary text panels

When you start wireframing a page, you’ll soon come up with the need to put some text inside a box. One way to do this in Axure is to drag 2 widgets into your page: a rectangle and a text panel.

While there’s nothing inherently wrong about this, now you have 2 objects to worry about. You need to ensure that they’re moved & re-sized together, and you’ll have to group them to make sure this happens automatically. In most of these cases, there’s a simpler solution.

Axure allows you to add text inside most widgets, including Rectangles, Placeholders, Button shapes and even images without the need to create a separate text panel. All you need to do is double-click on the widget you want to add text to, and you’ll see a cursor that allows you to enter text. On image widgets, double-clicking sets the image, so you need to right click and select ‘Edit Image > Edit Text’ instead. To get the text in the right place inside the rectangle, you’ll probably need to use the widget properties panel to adjust the horizontal/vertical alignment and the padding.

2. Using arbitrary sizes

Axure offers you a drawing canvas that’s reproduced at 1:1 pixel size when you export to an image or to an HTML prototype. This means you need to make sure that you set widget sizes in Axure to the accurate pixel sizes that you expect them to have on the finished website. If you use arbitrary sizes, your wireframes might look too large or too small when viewed through a browser, and won’t appear like a realistic prototype of a website.

How do you decide what sizes to use? Probably most important thing to define is the page width. A standard width that’s often used is 960 pixels, which makes your wireframes look fine on a minimum 1024×768 screen resolution. To make sure your page fills these 960 pixels and goes no further, you can use the ‘Guides’ feature in Axure to create a global guide.

Axure can do this automatically for you, as well as creating extra column guides to help you come up with good proportions on your wireframes. This is done through the ‘Wireframe > Grid & Guides > Create Guides’ dialog:

3. Using dynamic panels for simple interactions

Dynamic panels are a powerful tool, and they allow you to make any part of the page have multiple states; however there are a few simple things that you can accomplish without having to deal with the complexities of dynamic panels:

  • If you want an object to have a hover state or selected state with different formatting (e.g. bold and highlighted), you don’t need to use a dynamic panel. Instead, you can right-click on the object and select the ‘Edit button shape > Edit Rollover/Mouse Down/Selected/Disabled Style’ options. Axure will then show you a dialog where you can specify the formatting changes that you want for each state.

  • If you just want the text on a widget to change as part of an interaction, you also don’t need to set up a dynamic panel with the widget in different states. You just need to select the ‘Set Variable/Widget value(s)’ from the actions list when you define an interaction.

4. Leaving widgets and dynamic panels unlabelled

When you add to the page a widget or dynamic panel whose state you’re planning to modify later on through some interaction, you should immediately try to give it a descriptive name. Otherwise, when the time comes to define your interaction, you’ll be faced with a long list of ‘Unlabeled’ items, and you won’t have any way to find the one you want to interact with:

Axure also gives you a summary of interactions in “human readable” language. Using descriptive widget names means that this summary will be easy to read and understand, as in the following example:

5. Forgetting to keep previous versions

Although Axure has got an ‘Undo’ feature like most other design tools, it’s sometimes easy to make subtle mistakes (such as deleting a part of your page) that you won’t notice until much later. Also, people who review your wireframes might ask you to make some changes but later change their mind and ask you to revert to an earlier version.

If you’re making drastic changes to a page, it’s usually worth using the ‘Duplicate page’ feature to create a copy of that page that you can keep as a backup. You can also keep regular copies of the entire Axure (.rp) file, for example a copy every day or before each significant design iteration.

However, the best way is to use the Axure ‘Shared Projects’ feature – even if you’re not working in a team and need to share your project with others. When you’re managing your project as a shared project, Axure automatically keeps a copy of the previous version every time you press ‘Check In’. To access these earlier versions, go to the ‘Share’ menu and select ‘Browse Shared Project History’. You’ll be given the option to pick a previous version an export it into an independent Axure file, so you can see what your project looked like earlier in time, and copy things that you might have since changed or deleted.

Have you got any great Axure tips? Let us know in the comments below!

Want to learn to create wireframe prototypes quickly and easily with Axure RP Pro?  We have two training courses that might interest you. For beginners we have a standard Axure training course and for more experienced users an advanced course.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320