Tag: imported

Dissuading Clients from WYSIWYG Interfaces

Microsoft and Apple have a lot to answer for. Yes, Xerox PARC created Bravo, seen as the first WYSIWYG (what you see is what you get) interface, but Microsoft and Apple made WYSIWYG the expected interface putting content into a computer. What we called “word processors” were actually desktop publishers, giving users the ability to see on the screen something very similar to what would come out on the printer.

That user expectation crept into the world of web designers with HotDog, WYSIWYG content management systems (CMS) and phrases like “above the fold”.

At the time none of us were thinking about screens as their own medium. WYSIWYG refers to paper. “Above the fold” refers to paper. Websites have nothing to do with paper and WYSIWYG should have no place in creating websites.

To start with, when a piece of paper’s size changes, its content and value changes with it.

Responsiveness

If we’re asked to come up with a new website design in 2016, there is no question that we have to make it responsive. WYSIWYG and responsiveness cannot coexist. We can’t demand that everybody set their screens to the size we’ve designed for. We tried that in 1999 and it was stupid even then.

WYSIWYG exists as an opportunity for people to design how the screen will appear. The problem, obviously, is that the screen will almost never appear that way.

Karen McGrane explained this well in her 2013 A List Apart piece, “WYSIWTF”.

By allowing clients to continue to use WYSIWYG, we are doing them a disservice: allowing them to engage in an ongoing self-deception that content is going to look a certain way when it’s published. It’s part of the same self-deception that publication is final and no further maintenance is required.

Building a better experience for everyone

When we start discouraging clients from pursuing a WYSIWYG solution, we will encounter resistance.

Many people think that WYSIWYG is the only way. Its existence popularised word processing and personalised the act of typing. People expect the ability to control how their content appears in the world.

We have to show them the value in the alternative. That’s a difficult path because it involves more work up front.

If we do our job properly at the start of a project, we can work out all the different kinds of content our clients are likely to have on their websites. (At Floate we did this with ANZ’s Shareholder Centre redesign) by auditing all of their content and identifying different types like “personnel”, “events”, “securities”, “protected pages”, “disclaimers”, etcetera.)

Then we work out the rules for these types of content:

  • When do they display and how do they appear?
  • What options do they come with?
  • How do images work with prose?
  • What are the maximum sizes that images can appear at the maximum width of the website?
  • What can be automated to reduce the size (both in dimensions and bytes) of images before they are served to the user?
  • How do we make it easy for people to apply semantics to text without specifying a visual treatment?

What’s a semantic-whosit-now?

This last question raises one of WYSIWYG’s biggest issues: It has clouded over the difference between visual-treatment applied to some text and the meaning that visual treatment was intended to provide.

Italics are a perfect example of this. Let’s quickly look at the needs of a music news publication. They might have a style guide that says something like:

Album titles are to be italicised (eg Carrie & Lowell refers to the Sufjan Stevens album) and song titles should be in double quotation marks (eg “Carrie & Lowell” to refer to the song by Sufjan Stevens). This will avoid ambiguity in reading and also remove the need for constant reiteration of which you are referring to.

That’s great for printing on paper that’s going to have that consistent style forever. We can’t guarantee that web-styles will perpetuate but the hope is to have the content remain available forever. We also can’t guarantee other technologies (non-visual technologies) are going to convey the meaning provided by the font-treatment or the quotation marks.

The visual treatment in print was implying metadata but on computers we have the opportunity to embed the metadata. Album titles can be assigned a property of being an album title, rather than just emphasised text the reader has to interpret.

It’s our job to teach our clients the differences here and help them adjust their workflows and concepts of the content they’re creating. It’s our job to facilitate our clients putting meaningful content into the world.

But clients don’t want to learn html

Nobody should be expected to learn Markdown or HTML or Textile just to add content to a website. They should be able to type and apply semantic classification of different bits of text in a graphical user interface (GUI) that they can recognise and use easily.

Entering content into the site should have a pretty short and shallow learning curve. That means that if people are used to highlighting text and clicking on a button on a toolbar to assign it some kind of role, then that functionality should be available to them.

This also means that we should remove buttons like The "italics" button icon represented by the letter <abbr>i<abbr> for italics and the "bold" button represented by the letter <abbr>b<abbr> for bold and replace them with buttons for [emphasis] and [strong] and other buttons that might give a similar visual treatments but include different meaning in the metadata like [cite].

A view of the WordPress edit screen with the "Kitchen Sink" option enabled.
WordPress’s ‘Kitchen Sink’ formatting toolbar gives the user the ability to align text left, right, centred or justified and to define the text’s colour. All of these inline style choices will end up in the database.

If all you do is change the code for the [I] button so that it produces <em> tags, you’re telling the client “We all know that italics is the same as emphasis, so let’s just use this shorthand.” By doing that, you are perpetuating this idea that the visual treatment is meaning when it’s actually an abstraction of the meaning. Remember, our job is to give clients the right tool to help them understand what they are doing. We can’t continue misleading them because it’s easier in the short run.

You can create a visual editor that still applies visible changes to the text as it’s entered into the CMS. It can use colours and visual treatments to differentiate assignments of meaning to text that requires it. This will make the client’s job easier.

Importantly, though, when we talk about this content editor with the client, we cannot call that WYSIWYG and should not lead clients to think that it is WYSIWYG.

So, what the hell is WYSIWYG?

WYSIWYG literally tells people that what they see in their interface is what will be produced on the other side. It implies that someone can change fonts and font sizes and that they can decide on text-wrapping and colours. These are aspects of the design that should all be defined in the CSS, performing a number of efficiencies including:

  • protecting the brand by having a central control over visual style
  • reducing the time it takes someone to enter content.

If we give content-enterers the control to define how the final product is displayed, those visual embellishments end up saved in the database (because they are inline in the code, by nature). Subsequently, any update to the design of the website will not be able to override those inline embellishments. That might result in text being unreadable or images appearing out of alignment. Then it becomes somebody’s job to clean up content that doesn’t work with the new styles.

In that scenario, we’ve avoided doing some extra work now that might end up costing the client many thousands of dollars in years to come or forcing them to compromise their visual identity.

The Big Challenge

We have to convince people who are used to a certain amount of control that a bit of a learning curve up front will save the company a lot of effort down the track. Even more difficult than that is the discussion we have to have with project owners that a bit of extra hard work at the start will mean a truer responsive website, future-proofing the investment while also helping to minimise future costs of adding and maintaining content.

This post was originally published in the Floate Design Partners blog

Building Sustainable User Personas

We've done a lot of work over the last 12 months for sporting codes, energy companies and banks. (Maybe plural is overselling it. It was one of each.)

As part of that we built user personas.

Creating user personas is hard work but totally worthwhile. They give us a sense of who it is we’re really designing for: an audience to target. They help us ask questions like: "Is Jamie interested in getting the latest scores while at his desk?" and "How important is it that Sonja see an incident report immediately."

The personas help us make the myriad decisions that we might not otherwise be equipped to make. They boost our empathy.

But there's a hole that clients and colleagues often fall into when it comes time to create personas. Continue reading

We need Hookturn now, more than ever.

Features to be significantly changed. Decommissioning of 360documentaries, Hindsight, Encounter, Into the Music and Poetica… One possible redundancy with the merging of Books and Arts Daily and the Weekend Arts teams… By Design and RN First Bite to be axed."

The Guardian lists some of the casualties of the ABC funding cuts.

As our government literally decimates the national broadcaster, I'm even more conscious of the need for the ongoing telling of Australian stories in whichever way we can.

We take a lot of pride in where we come from. As Melburnians we're constitutionally required to be parochial. Once every 18 months or so I travel to New York City and I marvel at its inhabitants' parochialism. They put us to shame. I've travelled to Austin, which has the unique position of being a parochial enclave inside of Texas, itself probably the most parochial place in the world.

I'm speaking about parochialism as a virtue, which opposes my personal economic beliefs for globalisation. But the two concepts can and should co-exist. Continue reading

Don’t be scared to share.

Last week I went to a meetup about strategy and content in New York. The theme was 'Show and Tell' and each attendee was supposed to bring a piece they had worked on to discuss the thought behind its content and design.

Only four of us braved the surprise sub-zero November weather to turn up to a meeting room at EMC's office and we were probably all a little disappointed to begin with. But soon we realised that with so few of us there we didn't have to restrict ourselves to three to four minute time limit. Just as well. The things we brought with us demanded more attention and investigation.

A content strategist brought her hybrid strategy/publication schedule template, designed to teach her large accounting firms marketing team that there was more responsibility to creating material than just releasing white papers into the wild.

A self-starting web-designer shared his vanity project to produce online documentaries to capture all sides of a story.

A strategy designer shared an intranet created for one of the world's largest banks to help employees get all the information they needed about their own employment (payslip records, accrued holiday leave, promotion and training opportunities), and how it was being used by the bank to improve employee retention.

I shared a recent Shareholder Review we created for one of our clients to discuss the narrative concept and how the content was able to exist in different formats online and in print.

We left amazed at the work we were all doing and I realised something really important: as an industry we don't share enough.

Sure, there are some who share. There are those who stand up at conferences and talk about what they've learnt. We see them all the time and too often it's the same faces over and over again.

Unfortunately, those of us at the coal-face rarely  talk about or show off the work we're doing unless we're pitching to new clients.

That's not enough.

What I saw that night is that there are people who, like us, are trying to solve difficult problems every day. When we work in isolation these seem like really unusual or even unique problems. If we shared these problems more often we might find that we’re not alone.  We might even find someone else’s problem is congruent with ours. Their solutions might have value for our projects.

We can learn from the experiences of other people even when (and perhaps especially when) we work in different fields. Some challenges are universal.
Designers need to learn the value of talking to one another about our work and why it excites us. We should also share our disappointments to show that it's unreasonable to expect every project to be 100% success.

The luminaries who publish books and tour the talking circuit do some important work, but if they're the only people we listen to we are going to end up with a homogenised set of solutions. But evolution's strength is in variety.

Let’s resolve to regularly share our experiences and talk to each other about the problems we face in creating our work. It takes a bit of guts and it can be a daunting task, but we will never improve if the only thing we share is exasperation at tight or mercurial deadlines. The power we have to improve our work is in sharing our problems, methods and results.

This post was originally published in the Floate Design Partners blog

How to Magic Yourself Better

We do a show that we release as a podcast about being better designers. It's called The Nudge. In it we try to cover some of the issues we think designers face and try to find people who can teach ways to improve on that.

But we don't often talk about the things we're currently doing as a studio to make us better designers; The things we're doing to make ourselves work smarter.

Recently we finished two massive projects. One was the ANZ Shareholder Review. We'll post a full case study about that shortly. The other was the redesign of the way one of Australia's major sporting bodies presents itself to the world.

These two projects took up every resource we had and then some. Many of us worked without weekends and up to 80 hours a week to complete these jobs on time.

That's not a brag: It's an admission. It shouldn't have happened. We should have been able to work smarter and avoid working harder.

During those two projects we already started looking at what we can do next time to make the work go easier. We knew that the way we were working wasn't great but we were stuck for the moment. Mid project isn't a great time to swap between task managers, for example.

But then again, is there ever a great time to do such a thing?

We were using Basecamp for our task management and project related communication. Or I should say, we were kind of using it. Basecamp became a dumping ground for files and messages, tasks that were never completed. It was a graveyard of work we had done, work we had intended to do, and it never gave us an understanding of what was happening right now.

We think this might be where our problem was. Basecamp is an excellent product but it just wasn't working for the way we do things.

Right now we're trying two new (to us) products: Slack and Asana.

Slack is a good team communication tool that many of our colleagues and friends had recommended.

Asana is a task management set of apps that gives the opportunity to categorise tasks in a number of ways, nest tasks to be as granular as we like, and offers snapshots on projects and their progress over time.

We're still in the early days of using these systems and we'll try to keep you updated on what we discover about them and ourselves.

At the moment, though, it's also important for us to realise that these systems can't make people work better but they can offer the opportunity to improve our processes.

Just like buying a new notebook doesn't make you write that novel and having a new bat doesn't make you a better cricketer, having new productivity tools isn't going to magic us into working better. It will take tenacity, discipline and support from each other when things get tough.

We're lucky as well that we work in a team. Hopefully we can do that better soon too.

This post was originally published in the Floate Design Partners blog

The Disruption Fallacy

It may engender a whole new stream of book reviewing, but I doubt it, because people are more interested in writing self-published books than in reading them. And if old media is so passé, why do they care so much about what we think?

Roger Sutton, editor in chief of Horn Book magazine, from
'No, I don’t want to read your self-published book' by Ron CharlesThe Washington Post, October 1, 2014.

We've been speaking a lot about the idea of "disruption" in the office recently. Of course, being urbane designers whose job it is to solve problems, we often regard the concept as nothing more than a buzzword surrounding or obfuscating a difficult truth: The world moved beyond the capabilities of a particular business model.

But it's also within our bailiwick to look at the issue of disruption with empathy for both sides and to try to help our clients, whichever side of the disruption line they fall on.

The above quote from Sutton identifies one of the unspoken problems of disruption culture. Survivorship bias pushes us to look at the industries which were damaged by new competition. The newspaper industry is an obvious example. People never paid for news directly. The news was subsidised by the classified ads. Craigslist started and the classified ads dried up.

Nigel Dalton, CIO of REA Group recently gave a talk at General Assembly in Melbourne about his time at Lonely Planet and how they failed to preempt Trip Advisor et al.

That put a really interesting spin on the concept of disruption. Is it the act of the new business models pushing out older forms, or is it failure on the part of the older forms to react with appropriate innovation when the landscape shifts?

We never really hear about the start-ups that failed because the industries they were trying to undermine acted quickly and well to reinforce their position.

And then, in this quote from Sutton, we see an interesting in-between stage. Self-publishing is easy and many people do it. There are parts of that industry where self-publishing succeeds, to an extent. Science fiction and fantasy audiences are much more willing to take risks on reading and discover new authors. Children's books, however, require an element of authority behind them to recommend them and let parents know they are making a wise investment for their children's education and entertainment.

If we look at the microscopic level we see disruption or thwarting, depending on the victor. But if pull out to a more macroscopic level we observe business as an ecosystem, producing wins and losses all over the place. We see evolution as it should be: Businesses succeed or fail based on how well they can live in a changing environment.

There will always be something new coming around the corner. A business in stasis is never going to survive, but a business in panic is only slightly better off. Sometimes what a business needs is a third party to show what's really important and its value as the environment changes.

That's where we come in as designers. Our job is often to be the calming influence, to stop the panic and to develop strategies for showing value to customers, shareholders, staff or anyone else who might need a refreshing vision of the part your business plays in what's important to them.

To paraphrase Yoda: There is no disruption, only do or do not.

To paraphrase Sigourney Weaver: There is no disruption, only Zuul.

This post was originally published in the Floate Design Partners blog

This week on ‘This Australian Life’

I grew up in Australia in the late seventies and early eighties, so it was natural for me to think that someone else's culture was more valid than mine: The TV shows we saw were mostly imported; The local content was news or soap or procedural cop dramas; Australian children's television was always solid, but as kids we were already given the sense that things that were made for us were of less consequence than things created for adults; And shows for adults that had a sense of quality came from the US and UK.

Is that how you remember it? It's definitely the way we, as a culture, talk about it—especially when we have the inevitable "Why can't we produce good comedies" discussion we love to have.

To believe that requires excluding the comedies like Auntie Jack, which led to Norman Gunston, without which we would have never had Let the Blood Run Free or The Games.

There were also the Kennedy-Miller mini-series, the way for which was paved by Crawfords productions, which eventually led to Simpson-Le Mesurier productions and the excellent Good Guys Bad Guys in the early nineties.

Australia is a giant country with a relatively small population. Our two most populous cities (only the second smallest distance between two capital cities in Australia), are almost as far apart as Paris and Berlin. We feel isolated from each other as well as the rest of the world, and as a result there is an insecurity in our actions.

Recently a friend told me he wanted to start a podcast festival in Melbourne. His intention was to invite Marc Maron and John Hodgman, and their presence would encourage other big names to come.

He never mentioned an Australian podcast he would like to invite.

So, why do we look externally for validation?

When I went to my first Webstock conference (realistically one of the best-run events I've ever had the pleasure of attending), I was disappointed that a New Zealand-run event didn't have any antipodean speakers.

I thought about this for a bit. Should we blame the organisers? (They are lovely people and work very hard.) Maybe they had evidence to show that local people weren't a big enough draw card. That's definitely what other attendees had suggested to me.

If this is what attendees think, based on just attendee-to-attendee discussions, then it's probably true enough market research.

But this problem doesn't happen with other countries or cultures. The aforementioned US and UK both host plenty of web-design conferences that draw huge crowds.

Do we just accept out cultural cringe and live with it, or do we fight against it?

This is a design problem. This is a problem of getting people to accept something they unconsciously reject. Its a problem of changing minds and behaviour.

But is it a problem worth solving? What are the costs associated with building antipodean pride?

There is a very real possibility that we fear realising our already perceived irrelevance—that, despite everything we have already given the world (wifi, bionic ear, ova freezing techniques), we still never think we'll be listened to when we talk. And there's nothing worse than an irrelevant body pretending it has validity. How embarrassing!

There is, however, the contrary position. If we are supportive of our own work and push ourselves to produce better products, then maybe it won't matter what others think. Maybe we will develop a confidence to be content with our own attention.

This is not about local design for local people. It's about holding our own work to an international standard, supporting it when it reaches that level and encouraging efforts to surpass it.

We can only do that one step at a time. It's going to be tough, too, but relevance is demanded, not requested, and that takes grit.

This post was originally published in the Floate Design Partners blog

The Stages of Web Design for a Client

An integral part of our job, as designers, is to communicate effectively. When we speak about our processes in front of a client, though, we often fail in this area.

We might not consider it jargon because these are names we use every day, but the client probably has no idea of the hidden meanings behind these.

I write ‘hidden meanings’ because although it’s obvious from their name that wireframes might just be outlines of what someone might see on a screen and comps (short for ‘composite layout’) are fully fleshed out designs in the final colours and fonts, those names don’t explain how these tools are used.

I realised this recently when speaking to a client: their questions and requests showed that, while they had signed off on the wireframe and information architecture, they weren’t really sure what they were signing off on.

We provide a phased approach to design so that the client can have input and sign-off at various stages during the process. This is supposed to be helpful and provide a sense of progress during what is the set of often unseen actions that it takes to make a website.

Perhaps we had failed in communicating the stages and their uses to the client because they started asking for functionality changes after we had moved past wireframes, they asked for menu items to be moved around on comps.

Many of these changes were barriers to progression on the project, as far as the client was concerned, but realistically had no bearing on the final product (which image was used on the comp in a placeholder section, for example), or required a return to a previous phase (changing the home page from a news matrix to three highlights in a carousel).

So I created this description for them. It runs through the phases of creating a website and what it means in terms of working with Floate. It identifies what is appropriate to alter at whichever stage of the process and what isn’t worth worrying about until later.

These are by no means the strict rules of creating a website. Everyone has their own process but we’ve found these phases (which all come after the research phase) are the best for walking a client at a large organisation through a complicated decision tree.

Information Architecture

This is often easy to produce after a solid research phase and it can help form the decisions in the rest of the process. We start with a dump of all the things we think need to be on the website as a result of interviews and competitor analysis. Then we categorise them based on behaviours we’ve seen in the research. Sometimes we’ve already started thinking about functionality.

IA can take a number of forms: a two dimensional tree is common although not realistic with a site that used a CMS with categories and tags. It can be a quick sketch of a page that shows how much of a screen needs to be dedicated to different pieces of information. It can be a diagram that shows how the different taxonomies of a site are defined.

The two things to remember here are that none of this is set in stone, it can all be changed right up to and including putting the content in the CMS, and that there is no right way to do it. Everybody understands the structure of information in different ways. There might need to be several treatments before all stakeholders understand where the project is headed.

Universal comprehension is the goal when producing IA.

Wireframes

These are used to show user interface concepts at a very rough level. Content placement on these pages is vaguely indicative of final versions only. The key with wireframes is that they contain everything that is expected on a page in roughly the right spot, but without any specifics around the names of sections, wording in captions or colours (if any are used).

Wireframes are general and low fidelity by definition. They are the skeleton that defines how the website works.

Composite Layouts (Comps)

These are high fidelity examples of what a page might look like. They can be used to get a good sense of font-sizes, how images appear with text, colours used etc. As part of creating the comps we try to create all the elements that we plan to use in the website: what will buttons actually look like in all their different states (active, hover, passive), for example.

The comps create the rules we use for how the website looks. Again, the content may not be correct. The names of menu items might be wrong (we can change them when we build the site) and images might be stock photography rather than final product.

We try to make it as accurate as possible but the nature of using a content management system is that it’s easier to make these changes once we have the colour and shape of everything confirmed.

Chances are, the number of pages that we have wireframed will equal the number of pages we have comped so you can see progress. Together, these will inform the functional and visual build of the website.

Staging Site

This is the phase to get to the nitty-gritty. Once we’ve built the website, changing the way something works or the shape of a button is time-consuming and inefficient. We should have changed those in the earlier phases.

But wait a minute. That paragraph should appear above the image with the happy man standing in a field and the graph needs a caption of “growth over time”. That’s a change we can make really easily in the content management system.

The carousel on the home page runs too slowly, let’s speed it up, and we’ve just tested that form internally and we need a couple more steps for people

Live Site

Seen a problem on the live site? Ready to go to your boss’s office and commit some horrific ancient ritual? Put the sword away. We can change that pretty easily. Some people may have seen the error but it doesn’t mean that it has to stay that way for all eternity. It might take a couple of hours to get the change through, though, because we have to change it on the staging site first, have it approved and then export the changed files, but it’s still possible.

Sometimes we are disappointed that we can’t do everything on the web that we can do in print. Other times we’re glad we can do so much more.

This post was originally published in the Floate Design Partners blog