Ad ‹› developer communication and technology (+e-commerce as bonus)
by Bivald/IT on Oct 15, 2010
- 807 views
2010 years AD <-> Developer communication presentation. I'm covering how to communicate with your developers (and why it's sometimes hard). Also talks about web technology and how to improve e-comme...
2010 years AD <-> Developer communication presentation. I'm covering how to communicate with your developers (and why it's sometimes hard). Also talks about web technology and how to improve e-commerce.
Presentation given at Hyper Island (Stockholm) for their iAD class (interactive art director)
Accessibility
Categories
Tags
More...Upload Details
Uploaded via SlideShare as Adobe PDF
Usage Rights
© All Rights Reserved
Statistics
- Favorites
- 0
- Downloads
- 12
- Comments
- 0
- Embed Views
- Views on SlideShare
- 805
- Total Views
- 807
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: 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
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 :)
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?
- 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
- 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...
It’s one of lives ironies.
However, not every developer is a saint.
How often have you gotten:
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:
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
- 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 EGO
I’m stealing graphics from a presentation by Sean Gerety here.
Ego boils down to...
http://000fff.org/developers-are-from-mars-designers-from-venus-a-question-of-metaphors/
So just...
Now that we sorted that out... how do you prepare you idea for your developer?
- 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
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.
Real world example
building 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.
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...
Or if he has, he isn’t sharing
Either way it’s like pulling teeth from a developer perspective.
We’ll get back to the time issue, but first..
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 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
Does you layout still look great?
Have you planned for that?
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.
The display of the avatar
The change avatar page
Error handling
Notifications
Database connections
Check if every webbrowser
Unit tests
It all adds up.
You’ll learn them after a while.
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)
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.
Be on the lookout for someone who answers too quickly on a real estimate. They aren’t covering your back.
- 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
Be able to choose technique depending on requirements
Know pros and cons
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..
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..
Anyway...
The designs you produce are front end.
Let’s break down front end into smaller pieces
HTML/CSS
Javascript
Flash
Here we’ll go through their pros and con
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..
CSS is how they are positioned and how they look
Colors
Positions
Fonts
Together with HTML/CSS you have a nice looking static site. But what if you a dynamic site?
Example? hyperisland.se
Still visible, not not very pretty.
Enough HTML/CSS, let’s move on
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.
Still visible, not not very pretty.
Enough HTML/CSS, let’s move on
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.
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.
Links: COPY+PASTE the URL
SEO Content without Javascript
Plus alternative content (but don’t style it)
What if we don’t have alternative content?
- 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
Can Google Read it
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.
Can you print it
Can you bookmark it
Can you send it
Can Google Read it
I won’t go very deep into them, but it’s good for you to know this.
Animate without JS
Better structure for Google
PUSH data
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.
So for now, you STILL need
alternative 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.
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?
PR is between 0 and 10
Everything 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.
Keeps everyone (including the client) on the same page. Allows for decisions without graphics.
- 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
But let’s talk about what to consider when doing wireframes
- Function over form. No nice fonts!
- Decide who’s in charge
- Deadlines
- Involve designers, developers,
customer
- Do every page
- Include ads
- Include admin features
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?
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.
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?
A good thing to remember on a fixed budget is...
Meanwhile,
This might sound weird, but it mainly because if you keep changing your mind, you’re the reason the project gets delayed.
Make sure to have short incremental deadlines
Enough about preparations...
Work hard to improve the site!
Make sure you...
- Page views
- How the users moved
- Measure errors (like failed sign
ups) to early spot errors.
Also..
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...
What is success?
You can’t succeed your customers expectations if you don’t define success.
Large sites
Real money
Wireframes, Flow charts,
The works
- You need your specs
- Cover your angles
- No system is perfect
After the site is released, make sure you track every button.
GA is great: Track pages, in-link, out-links, buttons
GA is great for tracking, but you also need to...
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)
Know how long a checkout takes
Know how fast a page loads!
Anywhere from 20% » 70%
It’s all about maximizing profit, minimizing drop outs.
- 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?
It also opens up for serious drops in traffic/sales.
The solution is to use small updates, and test them throughly.
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..
Also, if a user gotten the new look, they should always get the new look.
And last..
We’re gonna move away from the testing to good-to-know statistics, but first briefly the check-out flow and search.
- 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
Make sure to:
- Fix misspellings (like Google)
- Quick view a result (image expand etc)
- Add to cart (express checkout)
Roxy.com does this well
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
experience online”
Talking about speed...
Imagine that impact on an e-commerce site.
Google tried the same..
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.
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.