Ad ‹› developer communication and technology (+e-commerce as bonus)

Author: Niklas Bivald

Now in large friendly letters*

Don’t panic

* The joke is pretty much lost if you haven’t read the hitchhikers guide to the galaxy

Monday, October 18, 2010

Communications (and tech + good to know stuff)

AD ‹ - › Developer



AD ‹ - › Developer communications (and tech)

I don’t do developing!

“I'm an art director - I don't do developing”


Why would you need to learn this? Usually ADs that are none-digital.

Short answer: You need the basics

- Like an architect who don’t understand how buildings work - Like a car designer that doesn’t feel the need to know how cars are built.

The house would collapse, car crash. So does many digital campaigns.


Monolog or dialog?

Monolog or dialog?


What do you think?

Monolog: you come up with:

- Ideas - Make the graphics

And simply hand over all things to the developer and go for lunch

Dialog: You jointly figures out a solution to many problems.

Discussion


Monolog or dialog?

Monolog or dialog?


You donʼt have to have a developer to every creative meeting.

Regularly take you ideas through a developer or a person with technical knowledge.

Can be a developer, technical director, your damn cat for all that matters :)


Please Please Please....

Don’t run an idea in front of a client if you haven’t talked to a developer


Please: Don’t run an idea in front of a client if you haven’t talked to a developer

It’s just common sense,

A developer knows what is doable and how things can be improved

So, what else can a developer do for you?


What a developer can do for you

What a developer can do for you


- Fresh perspective and ideas- Possible, impractical or impossible?

The better synced you are with your developers, the better your end-product will be.

You will be ashamed if you need to return to your client stating the idea you presented isnʼt doable in your time frame.

He will:- Ask you thousand questions. - Force your abstract ideas concrete


Prioritize

Prioritize


Experienced developer will give you suggestions on how you can cut development time, ! - Sometimes a small change in ! your layout can cut down development ! times with days, even weeks.

Itʼs then up to you to prioritize. Is the function worth it? Can it be changed in any way?

Forcing a developer to make your exact solution without listening is plain old stupid. He knows the technical aspects.

In the end...


Life’s irony

You need a developer to know the details in what you want to develop


You often need a developer to know what you want to develop.

Itʼs one of lives ironies.

However, not every developer is a saint.

How often have you gotten:


It can’t be done

“It can’t be done”Don’t let them get away with this answer!


The most none-constructive answer you can get.

Usually:- Standard reply if you havenʼt explained in detail - Some small detail canʼt be done and he doesnʼt bother explaining it. - He feels that he isnʼt part of the process- He doesnʼt have enough information

Look out for those people.

Donʼt let them get away with this answer!

Reply:


It can’t be done

“What can’t be done?”“Which parts can be done?”

“What can be changed to make it possible”


Reply:“What can’t be done?”“Which parts can be done?” “What can be changed to make it possible”

Then you can change you solution accordingly.

It might also be the fact that developers fear change


Fear of change

Developers fear change... let’s try to understand why


Why? - A designer can fairly easy change designs - A developer in-progress can’t. (Bound by frameworks and code)

This creates fraction: Listen to the developer. - Small changes can make huge differences for him.

Another problem... is EGOI’m stealing graphics from a presentation by Sean Gerety, @IdeaKitchn (Sean Gerety), @fwdanimation, Casey Edwards, here.

Ego boils down to...

http://000fff.org/developers-are-from-mars-designers-from-venus-a-question-of-metaphors/


Introduction

@IdeaKitchn (Sean Gerety), @fwdanimation, Casey Edwards,



Introduction




Kill the ego

Kill the ego - You need each other


In the end, just remember that you need each other to make the client happy.

So just...


Introduction



Hug it out... (I love these graphics)

Now that we sorted that out... how do you prepare you idea for your developer?


Help your developer

Help your developer


Doing good preparations saves you a lot of trouble" -" Development will be easier and faster" - " You will actually save development time

" - " It makes sure you covered all the angles" -" It finds holes in your theories before client / developer see it

- The developer will be impressed


How to prepare your ideas

How to prepare you idea(for a developer)


Okay, youʼve hugged your developer, now itʼs time to work.

You have an idea and you want to prepare it for a developer.

What you need to understand is that this is not for the developer per se, but:

" - Covered all your angles " - Worked out the nitty gritty in your ideas

If this feels basic to you, If you do all this

Good for you. Your a minority.



Generic is the enemy, be specific!


This is the single most important point: You need to be specific

Real world examplebuilding a community with a large swedish youth company.

Each user has a 3d avatar.

One of the key points of this community according to the AD and CD is that the user should be able to change his avatar.

The actual brief we got (on a “start programming” level) was.


How to prepare your ideas: Real world example

User must be able to change his avatar


...


How to prepare your ideas: Real world example

We want it by friday


Thatʼs how deep the developer briefs usually are.

This is fine if itʼs part of the concept phase where everyone is working on the kinks and details of the parts. But to start program on? Impossible.

Even with a design for it, itʼs impossible.

Several issues here, first...



First problem:

They don’t know what they want


He has probably no idea,

Or if he has, he isnʼt sharing

Either way itʼs like pulling teeth from a developer perspective.



Second problem:

“It’s not so much to do”


They would probably choke if I told him this could take two weeks or more because “it’s not so much to do”

We’ll get back to the time issue, but first..



How would you formulate:

User must be able to change his avatar?


Discussion



Logged in users need to be able to change certain aspects on his avatar:

* Jacket * Hair

With a limited number of options on each. The exact changes needed is attached below. The AD will prepare each option for each parameter. They should be changed from the “change your avatar page” on your control panel. Sketches for all pages are included below.

- Add wireframe for “change your avatar page” here -Monday, October 18, 2010

Something like this in the end


How to prepare your ideas:

Sigh...

That was boring, wasn’t it?


Boring, but itʼs necessary.

Someone need to think about the details

Somebody will probably have to document them.

Unless you want your developer guessing. You donʼt



What about:

White text on a white t-shirt?


Hereʼs were we get nitty gritty. So far weʼve only been thorough.

" - What about error messages? " - What will happen if you have white text on a white t-shirt?

A developer can help you here. He should know that you need stuff as:

" - Error messages" - Notifications"" - On mouse over effects



What about:

No text or no t-shirt?


What happens if there are no content?

Does you layout still look great?

Have you planned for that?



Which end-product would you prefer?a) The one where you have all this information first handb) The one were you constantly would need to squeeze in new things (error messages, notifications, hover effects etc)


a) The one where you have all this information first hand

b) The one were you constantly would need to squeeze in new things (error messages, notifications, hover effects etc)

I would go for the second one.



Does two weeks still sound like much time?


The avatarThe display of the avatarThe change avatar pageError handlingNotificationsDatabase connectionsCheck if every webbrowserUnit tests

It all adds up.


How to prepare your ideas: The usual suspects

The (un)usual suspects(after a while you learn the answer the usual questions)


Iʼve prepared a quick check-list with the usual suspects:

Youʼll learn them after a while.


How to prepare your ideas: The usual suspects

What are you doing (in detail)? Which parts of the site is HTML?

Which parts are Flash? AJAX/HTML5?

Do the user need to log in?Exactly what data is saved?

Error messages?Transitions and animations?

What parts would need graphics (messages, transitions, etc)?Which pages do we have?

How does the user navigate between those pages?What content should be editable? (CMS)


What are you doing (in detail)? Which parts of the site is HTML?Which parts are Flash? AJAX/HTML5? Do the user need to log in?Exactly what data is saved?Error messages?Transitions and animations?What parts would need graphics (messages, transitions, etc)?Which pages do we have? How does the user navigate between those pages?What content should be editable? (CMS)


Estimates

A real estimate takes time (hours/days)(and requires answers)


This is important but often overlooked. A real estimate takes time, hours, days even.

If you ask for a rough estimate, make sure you ask for a detailed one later!

I know project managers that has asked for a very rough estimate that later landed in the real budget, and presented to the client.


Estimates

A rough estimate is a rough estimate(with emphasis on rough)


Just to be clear here: A rough estimate is a rough estimate. Use if carefully.

Be on the lookout for someone who answers too quickly on a real estimate. They arenʼt covering your back.


Coffee?

Coffee?End of part I



Coffee?

One last thing about developers...


Everyone wants to do cool things! - But itʼs a question of time! - This is why you need to get them involved early

Find or hire a social developer to be on your concept meetings! - Find someone you can rely on


Web techniques

Web techniques


Learn differences between techniques

Be able to choose technique depending on requirements

Know pros and cons


Web techniques

Developing: Front and back end


Two kinds of programming

One programmer can do both, or you can specialize

Front end is all the visible stuff on your computer

Back end is on the server and does the heavy lifting

In the end..


Web techniques

You need both


Front end is the nice interfaces, the buttons, the 3d effects

Back end allows you to save content, to save images, to send emails, to get twitter feeds. Back end is responsible for serving the front end.

Typical back end: Not visible stuff, sending emails, saving content, serving content, user authentication, login, registration

Time wise..


Web techniques

A developer will most likely separate the two:

2 weeks front end, 4 week back end


Back end is usually more complexed on a technical level. Many systems working together.

Anyway...


Web techniques

Enough back end, let’s go front end


Front end is were you will be working.

The designs you produce are front end.

Letʼs break down front end into smaller pieces


Web techniques

HTML/CSS, Javascript and Flash


I usually separate between techniques:

HTML/CSS

Javascript

Flash

Here weʼll go through their pros and con


Web techniques



Foundation of everything visible

Platform from everything is launched

Pro: Static, Search engines like it, blind people like it. Everyone can read it.

Cons: Static, not beautiful, by itself does not do 3d or video.

In order to serve any content you need HTML (Even with flash)

Moving to CSS..


Web techniques



If HTML = building blocks

CSS is how they are positioned and how they look

ColorsPositionsFonts

Together with HTML/CSS you have a nice looking static site. But what if you a dynamic site?

Example? hyperisland.se


Web techniques


With HTML/CSS


Web techniques


With only HTML.

Still visible, not not very pretty.

Enough HTML/CSS, letʼs move on


Web techniques



Javascript is added upon HTML and is a way to manipulate both HTML and CSS.

Javascript makes stuff move (Twitter example?)

Pro: "" " - Makes stuff move" "" " - Initialize Flash" " - Makes stuff dynamic

Cons: " " - Cannot show video on itʼs own" " - Search engines donʼt do javascript" " - Blind people donʼt do javascript. " " - Errors cripple the page.


Web techniques

(movie with twitter example removed)


With only HTML.

Still visible, not not very pretty.

Enough HTML/CSS, letʼs move on


Web techniques



Application-in-an-application. That means that when you visit a HTML site with flash on it, Flash is actually a own application. Flash can do pretty much what it wants in itʼs own boundaries.

Pros: " " - Can show video"" " - 3d

Cons: " " - Bloated, Heavy" " - Search engines donʼt do Flash at all, " " - Long time to load, " " - Blind donʼt do flash. " " - Right click menus.

Flash looks the same in all browsers, but html/css does not.


Web techniques

Different browsers - different looks


Sites look different in different browsers. Mainly Internet Explorer.

Developing for Firefox, then you need to check: Internet Explorer 7 and 8.

Often 80% of development, 20% checking in other browsers.

Letʼs go back to flash.


Doing Flash the good way

Doing Flash the good way:

Usability, Links, Alternative content


Usability: Should be easy to useLinks: COPY+PASTE the URL

SEO Content without Javascript



Doing Flash the good way takes time:

You need to make Flash, Plus the alternative content


You need to make FlashPlus alternative content (but don’t style it)

What if we don’t have alternative content?



Flash Example: www.thelotteryoflife.co.uk

Google, Right click, Print, SEO links, JS


- If a blind can’t “see it”,- Google can’t read it.- Use Links- http://www.seo-browser.com/

Example



Can you print it? Can you bookmark it? Can you send it to a friend? Can Google read it?

V


Ask you developers this:Can you print itCan you bookmark itCan you send itCan Google Read it


Ajax

The “almost new” web:

Ajax - Web 2.0 - Facebook


When youʼre talking about web 2.0 you often mention AJAX.

Recently you needed Flash to do dynamic stuff such as advanced layers, effects, animations.

Now you can do most of that natively in your browser.

Using Advanced Javascript. Ajax is what powers Facebook and Twitter.

It takes less time to load, it feels “lighter”. You donʼt need to refresh the page on every click.


Ajax

Can you print it? Can you bookmark it? Can you send it to a friend? Can Google read it?

V


Ask you developers this:Can you print itCan you bookmark itCan you send itCan Google Read it


HTML 5

The “new new” web:

HTML 5 and CSS 3


Most of you have probably heard about HTML 5 and CSS 3.

I wonʼt go very deep into them, but itʼs good for you to know this.


HTML 5

Plays videos without Flash Can animate without JSBetter structure for Google Better support for PUSH

V

Minimizes dependencies on Flash and JS


Play videos without FlashAnimate without JSBetter structure for GooglePUSH data


HTML 5

The real-time web:

PUSH content to the user in real-time, Instead of traditional GET every X sec.


PUSH or the real-time web allows you to PUSH content to users.

Traditionally you load a site, disconnect and read it.

If you need updates, you poll them every X seconds.

PUSH allows us to send when we want it, how often we want to.


HTML 5

There’s always a catch (HTML5/CSS3):

Not fully supported (in a long time)Needs alternative content


Evolution goes slow, itʼs quite some time before all supported them.

So for now, you STILL needalternative content for HTML5.

On that note, Letʼs go deeper into why itʼs so important.

Letʼs talk about Google really quickly before we drink more coffee.


Search Engine Optimization

Making sure Google can read you:

Content, Structure, In-links


Google is smart - as long as it can read your content.

It needs valid structure and good links

Also, you need people to link you.

It can’t read flash! It can’t read Javascript!

So how does Google rank pages?



Making sure Google can read you:

SEO (Search Engine Optimization)


All the things Google knows about you measures up in Page Rank. The higher the high you appear in the search result.

PR is between 0 and 10Everything above 4 is good

I could spend a week on search engine optimization alone, but it’s better if you research it independently.

SEO is basically: - Optimizing titles - Content - Pages - Links to improve your ranking.


Coffee

CoffeeEnd of part II



Flow charts and wireframes

Flow charts and Wireframes:

The process and the structure


Work out and visually describe what to do.

Keeps everyone (including the client) on the same page. Allows for decisions without graphics.



Flow charts and Wireframes:

Forces you to think!


- A way to break down what you need to do- Easier to estimate

Either plan the website, or plan for headaches and missed deadlines.

Show wireframes, not designs. Get a sign-off.

Let’s check out a flow chart




Sample workflow




Moving on to wireframes, I’m not going to talk to much about this example. It’s pretty obvious how things look.

But let’s talk about what to consider when doing wireframes



Improving the wireframes:

Things to consider


Helps you map out your entire site:

- Function over form. No nice fonts! - Decide who’s in charge - Deadlines - Involve designers, developers, customer - Do every page - Include ads - Include admin features


Use cases

Use cases?


Before we leave the sketching, donʼt forget your use cases. It will help you see it from a users perspective.

Define your customer and give him a profile, ideas, views. Now look through their eyes.

When all the planing is done itʼs time to choose, should you develop it in-house or out-source?


The cost of development

Development costs

In-house our out-sourced?


Your process will vary. In-house developers will be more in-process since they usually sit side-by-side:

- Easy to use as a resource - Easier to drag ideas to - Easier to drink beers with.

Out-sourced developers you usually more formal briefs to work from.

You need an in-house developer or someone to bounce ideas with when out-sourcing development. To make sure your briefs cover everything.



Development costs

Are you fixed priced, or on an hourly rate?


Preparations depend on if you are fixed or on an hourly rate.

If your hire per hour it’s easy to do less preparations and specifications. Just remember that time flies.

If you hire per hour remember that any mid-project changes drastically increase your costs.

Seen this happen many times: - Let the developer work for two week - Change the direction totally

He’ll have to scratch pretty much everything he has done. You just lost 50 000. Was it worth it?



Fixed price:

Calculate hours required, then add 20% for shit happens


It’s a good rule of thumb, add 20% for shit happens :)

A good thing to remember on a fixed budget is...



Fixed price:

If you hire someone on a fixed budget, you get what you specified. If you forget

things, you’ll have to pay extra for it.


If you hire someone on a fixed budget, you get what you specified. If you forget things, you’ll have to pay extra for it.

Meanwhile,



Hourly rate:

If you hire someone on a hourly rate, you take accountability for his progress!


If you hire someone on a hourly rate, you take accountability for his progress!

This might sound weird, but it mainly because if you keep changing your mind, you’re the reason the project gets delayed.



Hourly rate:

Time flies! have incremental deadlines


The main thing to remember with hourly rate is that time flies.

Make sure to have short incremental deadlines

Enough about preparations...



Moving on:

What to do when the site is released?


When the site is released, your work is not done!

Work hard to improve the site!

Make sure you...


Measure everything

Measure everything!

You need the data,Google Analytics is king,

Tag every button!A/B testing


Measure everything: - Page views - How the users moved - Measure errors (like failed sign ups) to early spot errors.

Also..


Speed is key

Making sure your visitors stay:

Speed is key!


More in e-commerce section,But Speed is a factor in your Google ranking.

Slow sites mean less profits. More about that on e-commerce

But before we take a break and go there...


Measure everything

Measuring success!

You can’t succeed your customers expectations if you don’t define success.


Make sure you define success.

What is success?

You can’t succeed your customers expectations if you don’t define success.


Coffee?

Coffee?End of part III


Important things to know

e-commerce



This is a smaller side-presentation focusing on key points for e-commerce.


E-commerce

E-commerce is complex:

Large sites, “real money”, complex


E-commerce is complex.

Large sites

Real money


E-commerce

E-commerce is complex:

Structure is everything


Structure is everythingWireframes, Flow charts,The works


E-commerce

Choosing a system:

Have you specs ready


Choosing a e-commerce system is hard: - You need your specs - Cover your angles - No system is perfect

After the site is released, make sure you track every button.


E-commerce

Make sure you

Track every button


Track every button.

GA is great: Track pages, in-link, out-links, buttons

GA is great for tracking, but you also need to...


E-commerce

Make sure you

Monitor! (goals and alerts)


Not only track everything,But monitor everything!

Create goals in Google Analytics: - Community: Created user - What would you have for goal?

Use alerts to get mail if something starts breaking or user habit changes rappidly.

Example alert: 50% more traffic suddenly (blogger in-link)


E-commerce

Make sure you

Use thunnels, monitor speed


Use tunnels, get to know your visitor

Know how long a checkout takes

Know how fast a page loads!


E-commerce

What is your

Shopping cart abandonment rate


When a customer starts an order/checkout but doesn’t finish it.

Anywhere from 20% » 70%

It’s all about maximizing profit, minimizing drop outs.


E-commerce

Where do you

Loose your customers?


Monitor your loopholes:

- How many people do you loose?- Where do you loose them?

Now that you know where you loose your customer, how do you improve your site?


E-commerce

Make sure you

Do small (incremental) updates!


Hard to measure the success of each part if a huge launch

It also opens up for serious drops in traffic/sales.

The solution is to use small updates, and test them throughly.


E-commerce

Make sure you

Use A/B split testing


A/B testing means that you create an alternative function (page, section, flow etc.) which is small and definable.

Then run them side by side, with a small percentage of your users getting the new page. Then measure success.

I thought I’d through some do & don’ts for A/B testing..


E-commerce

#1 good to know when A/B testing:

Make sure you run them side by side


It’s easy to be lazy and run A for 2 weeks, then B for 2 weeks. Don’t do it, you can’t trust the result.


E-commerce


Don’t scare your users(a.k.a test on new users)


Don’t scare your users. You don’t want to hurt your regular visitors.

Also, if a user gotten the new look, they should always get the new look.


E-commerce


Make it cross-site


If you are testing a new button for example, use the new one on the entire site!

And last..


E-commerce


Be prepared for a surprise


It’s quite common that the result that works best is not the one you had in mind. Trust the stats.

We’re gonna move away from the testing to good-to-know statistics, but first briefly the check-out flow and search.


E-commerce

Tips and tricks

The check-out flow


One of your most important flows is the check-out.

- As few steps as possible (4 most) - Don’t require registration! - Break it down to logical steps (1 step for shipping, etc) - Measure where people exit

Work hard to improve it - it will show. Next is search


E-commerce

Tips and tricks

Search and you shall find


Search is important. As many as 40-70% of shoppers navigate through your search at one point or another. Yet this is often ignored...

Make sure to: - Fix misspellings (like Google) - Quick view a result (image expand etc) - Add to cart (express checkout)

Roxy.com does this well



www.roxy.com


Roxy is a good example

But why am I talking so much about page speed? experience, smooth user flows?

Bottom line is...

http://www.roxy.com/search/index.jsp?kwCatId=&kw=bag&origkw=bag&sr=1


E-commerce

“27% are less likely to buy from a retailer off-line if they had a bad

experience online”


“27% are less likely to buy from a retailer off-line if they had a bad experience online”

Talking about speed...


E-commerce

“40% of users would abandon a site if it takes more than 3 seconds to load”


“40% of users would abandon a site if it takes more than 3 seconds to load”

Imagine that impact on an e-commerce site.


E-commerce

“0.1 sec slower pages dropped -1% from Amazons sales”


“+100 ms slower pages = -1% in sales (Amazon)”

Google tried the same..


E-commerce

“0.5 sec slower pages dropped -20% from Google search traffic”


“0.5 sec slower pages dropped -20% from Google search traffic”

Well, that was some short statistics. Of course there is much more out there. But we can only cover so much, and this lecture ends here.


E-commerce

Rounding it all off...

Closing words


e-commerce is an exiting field. It will continue to grow and grow. Looking at the e-commerce sites out there we have a lot of work ahead of us.

Just make sure to measure everything, and more importantly hug your developer.

That’s all for me, I will be sending out a Google Form about how you experienced the lecture.


Coffee?

Coffee?End of e-commerce


Important things to know

e-commerce



Communications (and tech + good to know stuff)

AD ‹ - › Developer



Design

Ad ‹› developer communication and technology (+e-commerce as bonus)