On Saturday 8th December Makemedia’s in-house UX Designer Patrick Sansom ran the event UX Camp Brighton. He summarises how the day went.
Over 80 people from a variety of backgrounds gathered in Brighton to share knowledge and professional methods on a wide-range of subjects related to User Experience Design (UXD). Some of the topics covered included:
Mobile Usability Testing
UX and Product Managers
Art & Science of Conversion Optimisation
Brand-Driven Design
Diary Studies
Designing for Cognitive Ease
Analytics Tools, Monitoring and Best Practice
A Cheat’s Guide to Personas
Grid Scramble at UX Camp Brighton 2012
The sessions were of a really high standard with a multitude of practical takeaways that can be applied in our day-today work. Coverage of the sessions can be found on the event page and attendee comments have be really positive.
Three of our Makemedia folks each held well received and jam-packed sessions:
Ben Scammels gave a detailed case study on how to implement Mobile-First Responsive Web Design, using a rapid-prototyping framework.
Paul Ferguson outlined some New Browser Technologies which may help improve user experience.
Patrick Sansom described how Domain Modelling had been invaluable technique for a challenging project.
Expect to see these talks and slide decks up on the Makemedia website shortly.
In addition to providing the framework for learning and networking, the event also raised a good sum of money for local Brighton charity Spark and Mettle, thanks to the generosity of the attendees.
The next event is planned for December 2013.
Interested in how our in house UX expertise could work for you to create efficient targeted results? Get in touch by calling 0845 017 8777 or by emailing info@makemedia.com.
When not working to create great user experiences for our clients, Makemedia’s in-house UX Designer Patrick Sansom also contributes to the UX community by organising UX Camp Brighton. He explains why this is one event you really can’t miss.
For those working in the digital media industry, the value of ensuring a product is useful, usable, intuitable and satisfying for it’s users is a given. However, achieving this is not always easy and can require a wide-range of practical knowledge from many disciplines and expertise of a variety of methods and practices.
UX Camp’s are one of the best ways to gain this understanding. They are all about sharing learnings, tips, tricks and best-practice with your peers in a supportive, collaborative environment. The breadth of subjects covered is amazing, with 50 talks to choose from in one-day! And with most sessions being practically-focussed, there are takeaways that you can use immediately in your work. You don’t need to have a UX or IA in your job title to benefit – if you work in the digital media, you’ll find plenty to apply to your day job.
The event will be held on Saturday 8th December 2012, from 9.45am to 5pm, at the Cogapp offices (21-33 Dyke Road, Brighton, BN1 3FE).
It is free to attend and the second batch of tickets will be released on the Eventbrite page on Friday 15 November 2012 at 12:30.
On Friday I was lucky enough to get a ticket to this years Ampersand – the annual typography conference that focusses on the hot topic of typography and websites.
Typography is becoming an ever growing concern of designers and developers since the advent of ‘@font-face’ and, more recently, CSS3 declarations that allow us to both apply various typefaces to websites and also to control how they are formatted. Gone are the days of ‘choose from these 5 webfonts and make images of the rest.’ We are now completely free to use 100’s of webfonts that are rendered as HTML, but with this comes the responsibility of applying type correctly. Developers and web designers alike have historically been limited in their ability to apply all of the rules that hundreds of years of typography has created, so it’s of no surprise that the knowledge of these intricacies has waned somewhat. It strikes me that one of Ampersands goals was to remind people of Typography’s rich heritage; the rules and considerations of the craft, and that we must, as we move forward into an ever increasingly digital society, continue to practice and propagate this knowledge to retain the depth and quality that the last 1000 years has informed it with.
Phil Baines (Professor of Typography, Central St. Martins) – last minute stand in for Erik Spiekermann schooling attendees with a Brief History of Typography
The day consisted of several presentations ranging from the foundations of type to hardcore technical applications – here’s a summary below and you can link to lanyrds fantastic site to view the decks (http://lanyrd.com/2012/ampersand).
Keynote – Phil Baines. A brief history of type highlighting where webfonts fits in with the big picture of progression of type. Detail in Web Typography – Yves Peters. The intricacies of typography – using the correct characters in the correct situations. Typographic Matchmaking – Veronika, José. A ‘what’s hot and what’s not’ from a humorous pair who may very well have ‘ruffled the feathers’ of quite a few designers by dissecting their typography to the audience!
Linotype the Film Q&A – Doug Wilson. A Q&A following the charming film of the history of the linotype machine which helped propagate the printing industry and therefore newspapers in North America in the 1900s. Designing Fonts for Screens – Jason Smith Leading TV brand font designer –channel 4, BBC1 and more CSS Font Stack Hackery – Laurence Penney Getting to the bottom of the depths of the ‘font-stack’ On Hinting – Lucas de Groot WOW! Who knew there was so much required to make a font work? – de Groot suggests it takes a day to ‘hint’ (tweak a font so its lines make it legible) 8 characters – that means about 4 months of work to release a fully fledged Calibri to Microsoft In Your @font-face - Jake Archibald A hilarious (and potentially offensive) study of how webfonts are processed Enhancing the Future - Elliot Jay Stocks A round up of CSS and JS options that allow us to make the most of type now
Special note goes out to Doug wilsons ‘Linotype – the film’ http://linotypefilm.com. I was sceptical about watching a 90 min film on a printing machine but the charm, warmth and depth of the characters completely blew me away. It highlighted the rich history of the machine and the craft that grew around it – in the end it was more about the innovations of individuals, the passion of craftsman and how the rise of the computer saw a dissolution of both. Surprisingly moving. NB. The first person who can explain the importance of ‘ETAOIN SHRDLU’ without using google gets a free doughnut.
…and Phil was good enough to hang around the next day and do a tour of public lettering in Brighton – here is the group perusing the Trajan ligatures of the war memorial
The next day, infused with all of this typographical awareness, I attended Phil Baines’ ‘Brighton Walk of Public Lettering’ which had 40 or so people staring at intricate type of the city’s buildings’ – and many public onlookers bewildered by what on earth we were looking at! Thoroughly informative and enjoyable and it took me to a few local public houses that I’d never come across before. Three cheers to typography I say!
The explosion in smartphone and tablet ownership in recent years has given way to the rise in popularity of application (app) downloads, motivated by a number of factors, including the perceived improved user experience, performance advantages, and ability to utilise hardware features.
The advantages for publishers of the marketplace ecosystems provided by each manufacturer include improved findability, and the potential for profit-making by taking a percentage of download cost for paid applications or content subscriptions.
If you want to check out some of our responsively designed websites and other projects see Makemedia’s case studies here.
A better portable experience
The lure of apps is easy to grasp, with layout, navigation, and typography optimised for the specific screen size, big or small. The boom in app popularity has seen a number of organisations simply translate their website content into downloadable applications, moving e-commerce, editorial, and social platforms from the browser, directly onto their user’s hardware. Even though many of these applications replicate content available from the same organisation’s website, they prove enormously popular with consumers.
Although the quality of their design varies, good smartphone and tablet applications deliver content in a way which does not require a user to work hard to get to the content they need. No need to pinch and zoom to scale up page content, no waiting for unnecessary page elements to load, and no need to battle with navigation designed specifically for a desktop user. Choosing an app over a website is often the pain-free choice.
The New York Times website viewed on Mobile Safari (Attr: Robert Scoble)
However, although app’s can be a viable solution for organisations wishing to optimise their content for portable devices (depending on their objectives and technical aims), there are potential pitfalls.
Potential disadvantages
Device Specific
Producing multiple apps to ensure coverage of the most popular hardware can add to development overhead, and this often means production effort may be limited to a defined number of devices. Market share is spread among a plethora of smartphones, tablets, and e-readers, so a percentage of any potential audience is lost.
Maintainability
Updating device specific applications can increase development effort and cost depending on the language employed, and add to the intrusive load of updates served to users. In addition, new arrivals to the marketplace may prove popular enough to justify additional investment.
Shelf life
Like VHS, CD-ROM’s, and DVD’s, apps have a best-before date which is hard to predict. As new formats bloom, new hardware launches, and application eco-systems change, so the software developed specifically for these devices will one day reach a point at which they are incompatible with the latest device or operating system.
Revenue
The ecosystems within which applications are managed by hardware and software manufactureres (such as the Apple App Store) mean a percentage of revenue is surrendered by publishers for every download of a paid application or subscription.
An alternative
Old habits
For several years the trend toward fixed-width website layout became something of a standard practice, delivering pages at set pixel width to allow greater control over their appearance. As desktop screen sizes grew, so did the accepted ‘standard width’ for websites, until the explosion in mobile browsing meant this would no longer cut the mustard.
Navigating a website optimised for a large monitor on a small screen (such as those on an iPhone) can be a frustrating experience, and the App Store beckons for those requiring for a more usable mobile experience.
Responsive web design
Infrastructure Journal’s responsive platform
The term Responsive Web Design was coined in May 2010 to specifically define a set of design methodologies and web technologies used to create websites that adapt to the size of the user’s screen size. In essence, a responsive web design can detect the size of a user’s web browser window size (from the smallest smartphone to the largest cinema screen) and reorganise the website’s content and navigation to suit.
It is delivered through a single set of code, without the need to create separate code for each of the different sizes of device. The result? Users of any version of iPhone, iPad, modern Android devices, and Windows Phone experience the same website, but with the user experience adapted accordingly. Those on desktop machines experience the same website in a form optimised for large screens too. No apps required, just modern web technologies.
The technical bits
Using a flexible grid system (the guides designers use to define page layout), flexible media (text, images, and video which can change size), and a technology called CSS3 Media Queries (website code which applies layout and styling changes based on the user’s current screen size), we can create websites which optimise for desktop and portable devices instantly using the universal language of the web – HTML.
Unsurprisingly, the use of this technology has become enormously popular, with organisations like Starbucks and The Boston Globe redesigning responsively, and others (like the BBC) experimenting with employing responsive web design techniques.
See it in action
Makemedia recently launched a responsive redesign for Infrastructure Journal, a global data and editorial website for the global infrastructure finance market. If you’re using a desktop browser, follow these steps to see how the new IJ changes it’s layout as the browser width decreases in size (such as on a smartphone), or watch the short screencast above for a quick glimpse of this technique in action.
Resize your browser window, making it narrower on screen
In a modern browser, you will see the page content flex and move to suit the size of your browser as it changes without the page reloading. Page content is reordered, navigation is optimised, and text sizes are adjusted for comfortable viewing.
Opening the same page on your smartphone or tablet browser has the same effect, with the website automatically adapting for the size of your chosen device, using the exact same set of website code used for the desktop site.
An app experience for everyone
Device agnostic
HTML has been the language of the web since it’s birth; websites designed fifteen years ago still work in today’s modern browsers, and will continue to for years to come. By developing responsive websites using HTML and CSS, experiences can be optimised to deliver websites optimised for any screen regardless of portability, manufacturer, or operating system.
From iPhone to Kindle, Android to iPad – the kind of experience previously the reserve of mobile-specific websites or downloadable applications can be had by all, through the browser.
Maintainable and scalable
Updates to websites designed responsively only require a single set of code to be updated when changes are required, without the need to interrupt a user’s experience through intrusive updates or negotiating app store approval.
More than a trend
Responsive design has quickly become an important part of many designer’s and agency’s workflow, and it’s ethos is starting to bloom beyond the technical definition outlined by Ethan Marcotte in 2010. It has led to many traditional design processes being reconsidered (with strategies such as Mobile First becoming more popular), with speed and performance again becoming one of the top considerations when developing for a multitude of devices that may have wildly differing connection speeds. Rather than simply being concerned with optimising for screen size, more detailed elements of a user’s context will soon be used to shape the experience they have, ensuring the most usable and optimised solution is delivered through their browser.
Ready to use
The good news is that support for the technology part of designing responsive websites is very good, with most modern browsers – which includes the majority of popular smartphones and tablets – able to take advantage of the techniques required to design responsively. Older browsers can experience a fixed width design, so don’t lose out on the same content.
One size doesn’t fit all
Like any design or technology choice, users and business cases need to be considered carefully before deciding a strategy for development: responsive web design isn’t the answer for everyone. Although multiple app development can be costly, responsive web design done properly usually requires additional planning, research, and design. Of course, there are occasions when web technologies alone cannot deliver the solution required, such as when direct access to restricted hardware (such as camera, accelerometer, or sensors) is needed.
Some publishers prefer the direct marketing opportunities presented by the marketplace ecosystem, and find designing to the restrictions of individual platforms a more efficient workflow. The monetisation model for app stores are also familiar to users, and cut down on the steps required for purchase once payment details have been stored. Until faster, more universal, and more integrated payment gateways are popular in the browser, app store ecosystems do offer a more seamless method of commerce.
However, if your aim is to simply translate an existing website experience for mobile, responsive web design is a great solution for delivering an optimised experience for as many users as possible, using web technologies which will stand the test of time.
I hope to follow this post up with some more detail around the methods and technologies used to deliver responsive web design, including case studies of how we delivered areas of Infrastructure Journal.
In the meantime, take a look at some of the other responsive website’s we have launched recently (Martin Searle Solicitors, BRS Global), or get in touch if you want to know how we could do the same for your organisation.
On Saturday 25th February 2012 I attended the Design Push event focusing on an emerging web technology called Web Intents (see my previous post). Working with an invited group of designers and technologists, we took on the challenge of creating a set of useful UX deliverables that could progress and improve the implementation of this new functionality.
The day began with talks from industry leaders Paul Kinlan (Google), Jim Lane (AddThis/Clearspring), Shane Caraveo (Mozilla/W3C) and Glenn Jones (Madgex) who have all been working on using Web Intents in a variety of different ways. They set the scene and demonstrated the complexity and range of issues that they have encountered so far.
We then broke out into three groups which explored some of the different user experience (UX) issues and ended the day with a presentation from each team. Our material was later uploaded to the Design Push Wiki for future reference, in order to help those continuing to work on Web Intents. The outputs from the event included:
Design principles
Notes on language and labels
Personas
Chrome and page interfaces
Thoughts on promoting Web Intents
Web Intents look to be a powerful set of tools to help make the web more useful and usable. The most prominent Web Intent and the one with the most obvious potential is Share. However the implementation of Share is also one of the more complex UX and user interface (UI) challenges. It already has some widely-adopted commercial cousins, most notably the service offered by AddThis. In his presentation, Jim Lane talked us through some of the solutions that his team at AddThis had developed and many of these ideas were later echoed in the team discussions. Creating a universal Share Intent could be a commercial challenge to these sharing services and might be a hard sell to companies already using them.
Personally I think it may be better to focus on the Web Intents that could be most rapidly deployed and have less existing competitors. In particular I’m thinking of Intents that could be really useful when combined with technologies that are neither well understood or much used by the average person. For example by combining the Web Intents Subscribe with RSS, or View/Save with Micro-formats (such as event, contact or product details) a greatly improved and more consistent user experience could result. It could also lead to the wider take-up of these under-used technologies.
How long it takes for Web Intents to be defined, standardised and implemented across browsers will determine whether they become a success or not. AddThis have 1.2 billion unique monthly users and 2.9 billion daily views, and they already provide other services such as Print (surprising popular in France) and Email. If they decided to extend into the territory of other Intents, they are likely to be able to do so fairly quickly. The web community, browser manufacturers and W3C better not drag their feet for too long, or some of the commercial operators may claim the ground first.
Next Saturday (25th February 2012), the inaugural Design Push will be held at the Cogapp offices in Brighton, UK. The intention of the event is to add some design thinking to how emerging web technologies will work and look. In the race to launch new features, the work on the user experience can occasionally be under-developed with some technologies presenting particular challenges.
The Design Push events will focus on a range of technologies, with an invited group of designers and technologists taking on these challenges. The aim is to create a set of useful deliverables on each issue, including recommendations, taskflows, design patterns and domain vocabularies. The idea is to assist those involved with particular technologies, by helping to drive forward the user experience design work.
I’ll be participating at the first Design Push, where we will examine the use of Web Intents. Originally devised for use on Android mobile phones, they determine what action a user intends to perform with an object and how to carry it out. The object/action pairing could be, for example, editing a photo or a sharing a blog. With the huge number of services that may offer these actions, creating a simple and effective process for the user is not straight-forward.
I’m excited to be involved with this event and I would like to thank the organisers, web and UX luminaries Glenn Jones, Danny Hope and Andy Dennis, for inviting me. I look forward to working with an impressive array of experts (including people from Chrome, Mozilla, W3C and Add This) to try and help make the web a little bit more useful, usable and enjoyable.
If you are interested in finding out more about Makemedia’s work and how great user experience in your digital offerings will benefit your company then please do get in touch with Makemedia here.
Among the many unusual characteristics of the User Experience (UX) industry, is its willingness to share knowledge. In other disciplines, what might be considered your competitive advantage and protectively guarded, is freely (often for free) given away. As most practitioners would admit, a significant proportion of our understanding of the field and how we keep up with contemporary practices, come from the exchange of ideas at the many and various UX events.
Another notable trait is the understated style of networking, engendered by the relaxed and friendly atmosphere at these occasions. The connections we make at UX events result in us having friends and colleagues to consult with, when presented with a new design challenge. A UX practitioner’s role can have a wide-reaching remit, so it’s customary (and considered by many to be good practice) for us to get advice from our peers from time to time (without breaking any NDAs of course!).
These two aspects, along with a desire to contribute to the UX community, encouraged me to get involved with organising some UX events here in Brighton. About a month ago I put on Brighton’s first UX Camp with a fellow UX designer Gavin Wye. The one-day ‘unconference’ was held at Cogapp’s spacious design studio on Saturday 1st October 2011.
UX Camp Brighton
There are no spectators at a UX Camp, as everyone is both an attendee and a participant. As well as learning from our contemporaries and taking part in discussions, each attendee is expected to conduct a session. This provides some useful practice in an important part of a UX designer’s job, giving presentations and running workshops. For more details, please have a look at the range of presentations and blogs about the day listed on the UX Camp Brighton website.
I am also involved with arranging the upcoming Design Jam Brighton on the 5th of November 2011, also to be held at Cogapp. Like the UX Camp, it is the first event of its kind to be put on in our city. Co-organised with UX luminaries Gavin Wye, Alison Austin, Danny Hope and Cennydd Bowles, we are expecting an exciting day of hands-on designing, experimenting, learning, sharing and fun.
Design Jam Oxford
Attendees are separated into small teams and given a one-day design challenge, which will only be revealed in the morning. Participants will to get a chance to try-out unfamiliar techniques and to design without the usual constraints. They will share and learn with their fellow teammates and be guided by some specially selected mentors. For more information on Design Jams, have a look at the Design Jam website.
The explosion in smartphone and tablet ownership in recent years has given way to the rise in popularity of application (
HTML has been the language of the web since it’s birth; websites designed fifteen years ago still work in today’s modern browsers, and will continue to for years to come. By developing responsive websites using HTML and CSS, experiences can be optimised to deliver websites optimised for any screen regardless of portability, manufacturer, or operating system.
