Archive | james morris RSS feed for this section

Design Jam London 1 – #djl1

30 Nov

Last Saturday, 20th Nov 2010, we attended the first DesignJam event in London. Design Jams are one or two day events that bring participants from a range of disciplines to solve a design or UX (user experience) problem.

Design Jam London 1 #djl1
Photo by Benjamim Ellis

DesignJam London #1 was a one day event. Fifty participants were split up into teams of five to solve the task. This same task was given to every group and was to be completed within 8 hours. See the day schedule.

The task: “What is the ideal interface to track & trace relevant online content, visited across multiple devices and locations? Lets explore how users can quickly and effectively access web content, that they have seen via multiple devices and locations…” (See full task details)

Our group:

For more information about the DesignJam London 1 see the wiki which includes teams profiles and workings.

Our views on DesignJam London 1:

We attended this event because we wanted to know more about UX techniques. James wanted to understand the steps from ideation to wireframes that UX professionals would work through. Mariana was interested in working collaboratively with other designers and learn from UX professionals.

Brainstorming post-it notes on a white board
Brainstorming by our group (Optimates).

An insight to some of the things we learnt:

  • Using Personas: Most groups were using user stories or personas. This technique isn’t something new to us but it did remind us of how powerful this technique can be, at giving direction to the early phases of a project. Having said that, you shouldn’t solely rely on user personas, because they are fictional caricature of your users. One of the questions raised there was when should we use personas.
  • Research via Social Media: One of the groups used twitter to gather users input before they had even started brainstorming and researching, giving them direction and effectively increasing the amount of people collaborating.
  • Mental Note Cards: Another team used Stephen Anderson’s Mental notes cards, which aid the brainstorming process. The cards remind you of psychological pitfalls that can influence the direction of a project. This is something we would like to have known more about.
  • Time Management: After the first team brainstorming and research presentations, we felt our team took too long brainstorming. To avoid this, we should have created a schedule, setting times and SMART goals.
  • Explaining ideas effectively: Our team had some great creative ideas. Although we thought we had the same picture in our heads, when it came to producing individual wireframes we could see how different our understandings were.
  • Knowledge of functionality helps: Knowing how to build certain functionalities can help when we are discussing ideas because we can have a better view on what is possible. Plus, while designing wireframes we can add more explanatory details of how things will function. Both of this points allow you to produce better user experience and usability. This leads us to think that developers and designers should collaboratively work together on usability and user experience processes.

What we thought Design Jam could have done better…

  • Making the Teams: The way professionals were grouped could have been better. In our group, for example, we didn’t have any UX experts, which would have helped. Maybe suggesting groups before the event would have been better.
  • Mentors: The mentors chatting to the teams as the event went on was a good idea, however, our time with them was limited. We would have liked to have spent more time and learnt more from them. Maybe a 30min talk in the middle of the day about specific techniques that UX professionals use on a daily basis.

Let’s do a DesignJam Oxford and/or Bristol (UK)!

That Saturday was certainly inspiring. Even for us who had to wake up before 6am on a Saturday and arrive home at 3am, we would definitely do it again, and we will. We are trying to bring it to Oxford and/or Bristol in the next year. So, if you have interest in taking part or helping organising it in those areas please get in touch (twitter @desdevusability, message or email) and we’ll let you know when this event will happen.

Thank you to all suporters

By James and Mariana


What makes a button a button?

10 Aug

Button design has evolved over time, from the dull beveled grey Windows 95 Start button to the shiny glass Facebook share button. When buttons started appearing on the web and computing in general, designers and developers were emulating physical buttons or ‘push buttons’. The definition of a button according to the is “a small device on a piece of electrical or electronic equipment which is pressed to operate it”. The key to this definition is that it reads “pressed to operate”. This is what was emulated because, as users we could identify with pushing a button to start a process or turn something on.

Example 1: Over design?
Buttons are lost in this design.

Example2: Flat, styleless buttons
Is the magnifying glass an image or a button to start a process?

It seems some designers are challenging or perhaps ignoring button conventions. Some “buttons” lack the properties of a button. The call to action can seem diluted and/or the button is camouflaged within the overall design. It seems that ‘push to operate’ intuition is replaced with “What do I do next?” or “Where do I click?”. The question I am asking myself and you is, have users learnt to look for new types or styles of buttons or are buttons changing because of design trends?

“Faced with the prospect of using a convention, there’s a great temptation for designers to reinvent the wheel instead, largely because they feel (not incorrectly) that they’ve been hired to do something new and different, and not the same old thing.” – Krug, 2006

Design and usability conventions shouldn’t really be challenged unless you are sure that you aren’t compromising the user’s experience. Don’t forget that user experience can impact on your reputation as well as conversion rates, to name but a few other areas that might be damaged as well as usability.

A button only functions as button if the user identifies its affordance. Users are often subconsciously looking for a collection of properties that make up a button.

“An affordance is a property, or multiple properties, of an object that provides some indication of how to interact with that object or with a feature on that object. A button has an affordance because of pushing because of its shape and the way it moves (or seemingly moves).” – Saffer, 2007

Example of properties associated with buttons:

  • Style (e.g. drop shadows, emboss, letterpress)
  • Colour
  • Size
  • Call to action (e.g Button label, title attribute, Symbols)
  • Positioning on the page
  • Hierarchy of information

However use of mobile phones for example, particularly with touch screens are changing the push feel of a buttons and evolving away from the traditional button that had to be pushed in. This change may have lead to the flat button style (see example 2) but if a button retains enough affordance the user will still recognise it.

What is important is the granular information, the affordance that the design of a button feeds the user. It shouldn’t take the user time to work out where or what is a button on the page. The ease of use comes from recognising the next step in a process and understanding how to initiate it. Conventions help us to design buttons that are more likely for users to recognise.


Don’t make me think – Steve Krug, 2006

Designing for Interaction – Dan Saffer, 2007

What do you think about button usability and the points I have raised in this post? Let us know with your comments.

Hello World – A brief introduction

11 Jul

Hello there!

We are starting this blog to share with you our views on web design, usability and web development.

We are: James Morris, a web developer (BSc in Web Computing) and Mariana Mota, an interactive designer (MA in Interactive Media and BA in Graphic Design) who share the same interests.

On this blog we will talk about usability mainly, but will also cover issues on design and development. Our aim is to discuss, analyse and bring forward our thoughts and ideas on usability. Not only using our opinions but what we read, research and experience in everyday working life. We may also talk about what our professional peers, leaders on this topic and users are discussing.

We believe that these disciplines are complementary and can overlap. Usability is a prime example of this.

We hope you like this blog and we are looking forward to hearing your thoughts! 🙂

James Morris &
Mariana Mota