The Essence Of Interface Development

Talk from JavaZone 2009, here is the abstract:
"With the financial crisis is sweeping the globe and once again there will be a call for developers world wide to become more versatile. This means more programmers having to do user interface work along with their regular tasks. Most developers approach the task of creating a user interface in much the same way a team of five year olds play soccer, everyone runs around chasing the ball without a plan or sense of the tactics involved in soccer. This talk is a helping hand for those of you who wants to learn the secrets of how to become a good user interface developer."

Transcript

1. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ The Essence Of Interface Development The Essence Of Interface Development by Espen Dalløkken by Espen Dalløkken @JavaZone, Oslo, Norway, September 9-10, 2009
2. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Who am I? Who am I? • Espen Dalløkken (33) • Worked with Interface Development for more than 10 years • NRK, Razorfish, Bekk Consulting, Fast, Ezmo • Currently with Statens Pensjonskasse • Freelance consulting Espen Dalløkken Inntektslag
3. W hy this talk? W hy this talk? • Most server side programmers despise or struggle with Interface Development – This is due to lack of knowledge – Inability to apply existing knowledge in a new environment – Cultural misconceptions and myths Espen Dalløkken Inntektslag, http://dallokken.com/espen/
4. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ “In a world where technology is commodity, user experience is THE differentiating factor”, Jeff Dachis, CEO Razorfish @Oslo office, 2000.
5. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ W hy Inter face Developm ent W hy Inter face Developm ent m atter s m atter s
6. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ N or w egian ASA N or w egian ASA • Norwegian low-fare airline • Spent vast resources on enabling the company to develop custom UI, instead of using the off the shelf Amadeus platform • Resulted in the Lavpriskalenderen ® which became the industry standard for booking flights on line http://www.norwegian.no/fly/lavpris/
7. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Apple's iPhone OS Apple's iPhone OS • The “scroll beyond the screen” feature • Useless feature, but is what makes the phone feel so great • Costs way more than just a scroll • A feature that will never win a cost/benefit analysis done by a PM • iPhone is the number one emerging cellphone on the planet
8. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ It's about m uch m or e than just It's about m uch m or e than just getting som ething on the getting som ething on the scr een scr een
9. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ From the presentation “Next Generation” by Jeffrey Veen: http://www.veen.com/jeff/
10. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ From the presentation “Next Generation” by Jeffrey Veen: http://www.veen.com/jeff/
11. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ From the presentation “Next Generation” by Jeffrey Veen: http://www.veen.com/jeff/
12. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ From the presentation “Next Generation” by Jeffrey Veen: http://www.veen.com/jeff/
13. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ From the presentation “Next Generation” by Jeffrey Veen: http://www.veen.com/jeff/
14. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ M ovem ent has m eaning Ola Nordmann Hurtigruta SPK Alder Nav Etterlatte Siste utbealing: 01.01.2010 Siste: 08.09.2010 Sendt søknad Null Null Siste: 08.09.2010 Sendt søknad
15. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ M ovem ent has m eaning Ola Nordmann Hurtigruta SPK Alder Nav Etterlatte Siste utbealing: 01.01.2010 Siste: 08.09.2010 Sendt søknad Siste: 08.09.2010 Sendt søknad
16. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ JavaZone
17. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Adobe M ax
18. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Pr ogr am m ing user inter faces is Pr ogr am m ing user inter faces is just like r egular pr ogr am m ing... just like r egular pr ogr am m ing...
19. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ .. except that it is so m uch har der .. except that it is so m uch har der
20. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ W hy is it so m uch har der ? W hy is it so m uch har der ? • Mistakes are visible for everyone to see • Interface development skills are only gained through painful experiences • You need to be the one communicating between customers, users, back-end programmers, designers and PMs • Being a good programmer is not enough..
21. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ You need to have... You need to have... • the development skills of an engineer • the eye of a visual designer • the know how of an interaction designer • the organizing skills of an information architect • and the diplomatic skills of an UN hostage negotiator
22. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ And you need to be par t sadom asochist And you need to be par t sadom asochist
23. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ and par t r ace hor se (faster! and par t r ace hor se (faster! faster !) faster !)
24. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ H ow untr ained developer s H ow untr ained developer s appr oach inter face developm ent appr oach inter face developm ent
25. Espen Dalløkken Inntektslag, http://dallokken.com/espen http://www.flickr.com/photos/xt0ph3r/1191102033/i
26. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ ..w hen you r eally should appr oach ..w hen you r eally should appr oach it like these guys.. it like these guys..
27. Espen Dalløkken Inntektslag, http://dallokken.com/espen
28. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Inter face developm ent: Inter face developm ent: Just like any other developm ent Just like any other developm ent task task
29. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Just like back-end cod your code Just like back-end cod your code m ust have m ust have ...loosely coupled components which withstand change over time ...a robust architecture to get good performance and be able to extend your application
30. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Object Or ientation Object Or ientation Central part of computer programming since it's innovation in the 1960's The number one problem for programmers who are put to do interface development work Good object oriented code is one way of achieving loosely coupled components The most important skill to become a good Interface Developer
31. Espen Dalløkken Inntektslag, http://dallokken.com/espen A father of tw o boys or a boy toy? A father of tw o boys or a boy toy?
32. Espen Dalløkken Inntektslag, http://dallokken.com/espen A loving w ife and m other, or a sex A loving w ife and m other, or a sex kitten w aiting ther e just for you? kitten w aiting ther e just for you?
33. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ OO this? OO this? http://www.nytimes.com/
34. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ or m aybe this? or m aybe this? http://boxee.tv
35. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Object Or ientation in U I is har d Object Or ientation in U I is har d Learning to apply general principles when working in a new environment is hard Working in languages such as Java Script is not considered real programming and the approach towards code reflects this You should follow the S.O.L.I.D. principles for UI code “It’s only UI, so it is different from persisting data” http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod
36. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ H ow you can appr oach cr eating H ow you can appr oach cr eating layout w ith Cascading Style Sheets layout w ith Cascading Style Sheets
37. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Applying CSS Applying CSS Left Colum Right Column Top Navigation Main Content
38. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Objective for CSS appliance Objective for CSS appliance • Lists of elements should behave and look differently for each of the main sections • Should be able to swap colors easily for entire site • Demo
39. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Applying CSS Applying CSS • Separation of concerns by using two different files: – structure.css: box layouts and main structure – looks.css: colors, fonts, ++ • Behavior and form is assigned by placement • Extend behavior and form is done by adding more values for the class attribute • Enables you to easily script behavior by substituting CSS class names or moving objects
40. Espen Dalløkken Inntektslag, http://dallokken.com/espen Sur vival tips for ser ver side Sur vival tips for ser ver side pr ogr am m er s enter ing the “ UI pr ogr am m er s enter ing the “ UI jungle” jungle” http://www.flickr.com/photos/ash-man/305793696/
41. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Sur viving the br ow ser pur gator y Sur viving the br ow ser pur gator y Code to standards, then adapt. The validation tools are your compiler Constant inspection Firefox with it's add-ons are the best tool available Refactor to reduce the total lines of code Constantly refactor your code to make it as small as possible. Less code == less potential bugs
42. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ A conver sation about A conver sation about fr am ew or ks... fr am ew or ks...
43. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ A dialog of U I A dialog of U I • Programmer: “I find the Flex Framework to be slow, buggy and unstable” • Me: “I agree it is not perfect, but what alternative you think would be better?” • Programmer: “Well, I was comparing it to PL/SQL”
44. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Which is the better ham m er ? Which is the better ham m er ? Swiss Army Knife Electric hammer
45. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ W hich tool do you put in your W hich tool do you put in your backpack? backpack? Swiss Army Knife Electric hammer
46. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ U ser Inter face Fr am ew or ks U ser Inter face Fr am ew or ks • In their nature they need to be “Swiss Army Knifes” • Needs to be able to solve “any” feature a program might need and any crazy thing a designer might come up with • Has to work for all users regardless of device or OS
47. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Fr am ew or ks Fr am ew or ks • The Laws Of Leaky Abstractions – JQuery Framework – Flex Framework – HTTP protocol – +++ • Regardless of their abstraction level, you will need to know the core technology whether it being Java Script or the Flash API • Requires experience and knowledge of core technology to be applied successfully http://en.wikipedia.org/wiki/Leaky_ab
48. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Per for m ance Per for m ance • Focus on performance from the first line of code • You do not have the option to scale out • Always refactor your design and code to ensure great performance • You can never rely on the server side code “bailing you out” • Harder to do with asynchronous interface technology
49. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Autom atic testing the U I Autom atic testing the U I It is extremely difficult and expensive so you need to think before you go all out – Attend the talk “Effektiv Testing” Focus on creating some good test which covers the critical features Everything else needs to be covered by manual- or unit test Creating tests that doesn't break over time requires lots of experience and skills about the technology
50. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Wor king w ith cr eative people Wor king w ith cr eative people Ignore them – Make all issues the subject of a cost/benefit analysis. You will usually come out on top over difficult design implementations Work with them – Engage at an early stage with the designers and help them see your side of things Become one of them – Educate yourself and get enough knowledge to be able to see the world in a different way
51. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Sm ells to look out for w hen Sm ells to look out for w hen m anaging team s doing U I m anaging team s doing U I “The Framework X sucks”: we don't have the knowledge to work with the framework so we battle it constantly and don't put in the effort to gain knowledge “We can't do that because of X-Y-Z”: we don't know how to accomplish this. “Making the site accessible will cost you double the current budget”: we don't know much about accessibility and we have cut many corners during development which has made the code base stink
52. Espen Dalløkken Inntektslag, http://dallokken.com/espen/ Thanks too... Thanks too... Jeffrey Veen Flickr.com Nathaniel & Berit David Beckham Jessica Alba The Family Guy Per Otto B. Christensen Børre Wessel Chris Pelsor Questions, praise and/or abuse? Questions, praise and/or abuse? http://dallokken.com/espen/ http://dallokken.com/espen/