Web-projektin perute viestinnän ammattilaisille


Published on

Palmenia koulutus 1.11.2011

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web-projektin perute viestinnän ammattilaisille

  1. 1. Viestintä II1.11.11Web Site Project*phases & challengesAntti LeinoDigital director @ Omnicom Media Group#anttileinoAuthor of “Dialogin aika” and “.net (2010),Verkkoviestinnän käsikirja” (1999), and“Social Web for Small Biz” (2012)
  2. 2. Visualize.me
  3. 3. 3Pukstaavi.fi
  4. 4. 4Pukstaavi: tarjoupyynnössä riskillä ehdotus teknisestäalustasta, jonka roolin tulkitsin tärkeäksi tekijäksi
  5. 5. 5Pukstaavi: alkuperäinen kustannusarvio pohjautuentarjouspyyntöön tuntia € yhteensä SUUNNITTELU Aihealueeseen tutustuminen 4 0 0 Työpajojen valmistelu 40 0 0 Työpajat (2 kpltta) 6 0 0 Työpajojen purku 40 0 0 Toimenpidesuunnitelman luominen 4 0 0 ja toteutus Yhteys/projektinjohto/tekn valvonta 16 0 0 Avaus yhteensä 0 TEKNINEN TOTEUTUS Annetun konseptin ja ulkoasun pohjalta Oletuslaajuus noin 20 sivua Verkkosivuston työstäminen suunnitelmien mukisesti 0 Verkkosivustoon liittyvä koulutus sisältyy hintaan 0 Uutiskirjepalvelun käyttöönotto 0 Koodiviidakko yhteensä 0 YHTEENSÄ 0 YLLÄPITOKUSTANNUKSET(Koodiviidakko) Ylläpitomaksu julkaisujärjestelmä ja uutiskirjetyökalu 137 €/kk Uusien sivujen tuotanto 75 €/h
  6. 6. 6
  7. 7. 7Phases of Web Site -projectPhase 1: Definition and requirements: why? To whom?Phase 2: Development of size, content and structure: what?Phase 3: Visual design and interface development: how?Phase 4: Production and quality controlPhase 5: Launch and follow-uphttp://www.slideshare.net/anttileino/verkkopalvelun-suunnitteluprosessi-in-brief
  8. 8. 8Phase 1 -Definition and requirements
  9. 9. 9Phase 1 - DefinitionCollection informationClient Survey •  Business requirements •  Common information, products and services •  Business area analysis •  Current web site / previous solutions- analysis •  Reasons for the project / re-design •  Target audience and their desired behavior •  User -studies •  Desired overall feelings •  Content requirements •  Technology requirements •  Marketing and maintenance
  10. 10. Collecting user needs and userunderstanding • User segmentation / manageable chunks of user needs •  demographic criteria •  psychographic criteria •  attitudes towards technology •  knowledge of the subject in matter (novice, expert, professional) • Create different user groups •  Stock-broker system for novice small investors versus system for professional users must be different even they are using the same web- based application
  11. 11. 11Pukstaavi.fi requirements
  12. 12. 12After conversations and studies we should have anunderstanding about the following topics:Objectives – Overall goals? Business goals - sell more, save money? What other objectives canbe accomplish? Think: tonality, message, usability, recognition.Audience – Expected visitors, what do we know about them? What type of user profiles can beseen? Visitors needs, wishes, expectations, skills?Create “User Personas” to help focus on most important user groups.Tone-of-voice – what kind of tonality our client is looking for? Where do we want our visitor tofocus on page? Is this solution sofisticated,funny, safe, cheap, clean, fancy etc? Make clearanalysis about this topic because creative work is based on it!Size – what are the limitation of the project in all possible views: budget, timetable, creativesolution, technical needs, and overall size of the site (or application). It is impossible to make aproject plan without this information!Technology – what type of innovative technology (if any) our client expects us to use? Back-end/front-end? Remember to make a technical survey alsoMaintenance – what is our client´s idea about maintenance? How will be responsible and howoften? Is our solution part of something bigger entity? Is ti part of some kind of ContentManagement System? Is needed ask client to fill Maintenance Survey.Contact – Who are involved? Who makes decisions? When?Material available - Collect all previous related material. To know what has been done before. Toknow what is not supposed to do again.
  13. 13. 13Do not proceed without documented andapproved definitions and requirements 1.  Business requirements 2.  Audience analysis 3.  Content requirements 4.  Technical requirementsNext a) cretive brief and b) project plan
  14. 14. 14Creative briefSummary about project (what, to whom, why)Recognition / tonality / guidanceCommunication strategy (client)Competitive situation (client)Desired message in one sentenceCreative brief is typically internal document for a design team to start theirwork.Debrief is a summary of the objectives which is typically discussed togetherwith the client.
  15. 15. 15Project planList objectives and goals as well details, assumptions and limitations.Expected size of the site / or size of the application? Does our client provide allrequired material like images? Will our client provide all text material? Will it be editedto the web?Budgeting10-20% extra for extra costs or 3rd part costsTimetableRealistic“Deliverables”Building the project teamSetting up a test area for the project / extranetPlanning testing earlyKick-off!
  16. 16. 16Box.net
  17. 17. 17Client management is expectation managementIf our client signed a paper, put it in safe place.Print all e-mails which contain approvalsPrint all e-mails which includes briefs and changesAll oral approval must be re-approved via e-mail (or paper)Communicate. Continiously. Tell where we are going. What happens next? One e-maila week to tell what has been done and what is going to happen.If you see challenges in budget, time or creative solutions - call our client!Multi-vendor –project
  18. 18. 18Phase 2 -Development of size,content and structure
  19. 19. 19Phase 2 - DevelopmentInformation design organizes content/informationInformation design provides guidance, “traffic signs”, whichhelp visitors to get lost or to give upTime spend here saves time in later phases
  20. 20. 20Information design will be improved via visual designVisitors need visual clues, which help them to understand different parts ofthe sites and how they are related.For example colors, s h a p e s or font sizes help to make itemsunderstandable. Typically used in navigation solutions.
  21. 21. 21Good information designInformation design is about outlining structure both on page level(wireframing) and site level (content mapping)Successful information design creates common and functional systems fornavigation, use of images, layouts, headlines etc.It helps visitors to know where to go, what to do, and to accomplishsomething etcVisitors are not able to see efficient information design - things just work wellInformation design should be done prior visual design, at least iteratively.
  22. 22. 22Design moves from big to small, from chaos to detailsA. Content view (what are we going to publish here)B. Site view (how to organize content to a logical chunks)C. Page view (how to show detailed page elements within a page)
  23. 23. 23A. Content viewPlanning and development of the content – without good, relevant contentan innovative technology and fancy illustrations are just empty placeholders.
  24. 24. 24Pukstaavi / content plan
  25. 25. 25
  26. 26. 26Content planContent plan = outlining contentWithout this one cannot proceed in a project.Content plan does not contain ready-made text (though, it must be producedlater), it is a rough outline what kind of material, topics and items will beplaced to the site.It is also a high-level organization of the contentBird-view perspective.Do not waste too much time for details (headlines, sub-headlines etc). Theywill be decided in next phase.Add plan for the content production to our project plan
  27. 27. 27Some detailsSpecific attention must take when your solution is based on ContentManagement System •  Feeding the content to the system must be plan and add to time table.Mark to your content plan also secondary content like META-, TITLE-, form-and error messages to be produced and other content elements: photos,images, illustrations, charts and tables, videos, maps etc. •  Make your list as specific as possible (what, when, who). •  Keep on eye the size of the site at the same time •  Evaluate content plan weeklyEvery change afterwards affects overall project (layout, navigation, CMS..)
  28. 28. 28
  29. 29. 29B. Site viewSite map is a visual presentation about the structure, content organization,and in some cases about the user flow.Why Structure Map? •  The map communicates, defines and explains •  If it is not at the map, it could be out of the project implementation.. •  Map can be high-level presentation, or it could be very detailed Mainpage Company Products Services Employees Resources Product News Service HR Library Product lines Support Databases Line1 Line2 Line3
  30. 30. 30Tasks for the designersChunking: how to organize different items and how to tie them togetherSimilar content parts goes together but be careful not create categoriesvisitors do not understand.Every category creates a menu page5±2 ruleLATCHPrepare to expand: think and evaluate how much this site could grow andhow to make it possible: navigation has extra room for example.Leave room for any changesIf you already know that site will grow near future, add those section part ofyour design already now (IPO example)
  31. 31. 31Site map is one of the most important production toolsKeeping the site map up-to-date is important that designers can rely on itwhen producing images, text and especially during the implementation phaseWhen redesigning existing site it is wise to make a rough outline of the oldsite. •  Then decide can you use the same structure or not? Typically not. •  Can you use same labels (nomenclature)? •  Who does navigation changes?Remember that visitors do not have manual to use your site. And no onebother to read it anyhow :-)
  32. 32. 32Pukstaavi / site map / structure
  33. 33. 33
  34. 34. 34C. Page viewWireframes (“rautalankamalli”) are visual story-boards of the siteBuilding wireframes is interface designWireframes contain the hierarchy of the information but they do not exactlytell how certain element should appear on the page.Wireframes focus everything else than visual presentation. •  Describe navigation, text placement, graphical elements, most important headlines and other element which should be on screen. •  In other words, raw information appearing on page.Design wireframes from most used pages (4-8 typically)
  35. 35. 35
  36. 36. 36Pukstaavi / wireframes
  37. 37. 37Using wireframesRule: wireframes are designed for all main page, allsection main pages, and all templates required forthe site. Plus for all pages that will includesomething specialAdd details to every page, specify special needs forfunctionality (for example next the wireframediagram)Sometimes you need to create all wireframesUse either a) real, typical text from client´s businessor b) lorem ipsum (www.loremipsum.net)Add marking text only the amount you think therewill be on a final versionConsult all the time with visual designer! Wireframe designer must know standard user interface elements
  38. 38. 38Phase 3 -Visual design and interfacedevelopment
  39. 39. 39First law of usability
  40. 40. 40What is the most important thing one should do if youwants to make sure your web site is easy to use?Nothing important should ever be more than two clicks away?Speak the user´s language?Be consistent?DON´T MAKE ME THINK!You should be able to “get it” - what it is and how to use it,without expending any effort thinking about it.
  41. 41. 41Reality check: people do not use web pages like wedesign them
  42. 42. 42“Things” that make us think ?For example:1 Names •  Cute names, clever names, marketing-induced names, company-specific names, and unfamiliar technical names •  Jobs - Employment Opportunities - Job-O-Rama2 Link and buttons •  The ones that are not obviously clickable3 Search boxes •  If user have to think about how I want to search
  43. 43. Customer experience and Weband iPad and Android phone and interactive kiosk…Every site is a self-service product. •  No manuals •  No training •  No customer service repsThere is only user, facing the site alone with only her guesses and experience to guide her. •  It´s vital to understand what people want and need.The customer experience forms the customers impression of the company offerings. •  That why it´s vital to provide quality customer experience.
  44. 44. 1 Simple2 Social3 Alternative
  45. 45. 1 Simple “Don´t Make Me Think!”
  46. 46. 2 Social “I share. You Share. They share.”
  47. 47. Arviot & arvostelut Mitä muut ovat sanoneetKommentointi
  48. 48. 3 Alternative “We don’t read pages, we scan them”
  49. 49. Suosituimmat Kartat
  50. 50. 51Pukstaavi / visual design
  51. 51. 52Graphic templatesGraphic template is approved layout proposalWill be used to optimize rest of the pages and for productionNote that this proposal is always slightly different than final execution - CSS/TABLE/FLASH - based outcome is not the same than PhotoShop-layout. Tellthat to client.Now, create the final graphical elements.> navigation on/off/over -pics> buttons on/off/over-pics> placeholder or alternative-images for flash and video
  52. 52. 53Phase 4 -Production &quality assurance
  53. 53. 54PHASE 4 - Production & quality assuranceGoals for the production are simple: build a site (or application) that looks the sameand works similar to all visitor. Avoid multiple work, each page view is coded only onesEvaluate project situation prior production: is it in budget? In time? Is content readyalready? Is the test environment technically ready?The dynamo of the Internet is XHTML. Make sure your production team has peoplewho are extremely good in html programming (or flash/action scripting)Final decisions: •  Content •  Functionalities and features •  Design and layout •  File structure and file naming •  Directory naming •  Domain name
  54. 54. 55Content is always late.Content is always late. In 99% of the projects.Make a plan to produce and deliver content with deadlinesTight deadlines for the clients will help you.More earlier you receive the content, the better information design (andvisual design) will succeed.Add some buffer for content deliveryBe very happy if content is in time - more happier if it is in good quality.
  55. 55. 56Size: expectation vs. realityIs the project size like specified on site map or is it grown bigger? Can webuild the project on time? How much there is totally new content toproduced?Are the graphical template ready? Can we use our prototype?Dynamic content?File structure is surprisingly important detail •  Growth of the size •  Maintenance •  Direct access to sub pages •  Does the file structure follow content structure •  Are all images in one “img” directory?
  56. 56. 57Why prototype?With prototype design team can develop visual design and interface further,fine-tune information design, recognize missing content parts (too much, toolittle, missing all, wrong type etc) and test again and again…Requires testing •  Difficult framesets •  Functional mouse-over techniques •  Locations and size specific pop-up windows •  Style sheet and browser specific topics •  All functionalities •  Information architecture and navigation •  Terminology •  Usage logicInternet Explorer, Safari, Firefox, Opera, NetscapeBuilding the prototype also connects production team to the project and theyknow what is expected to achieve.
  57. 57. 58Style GuideAfter the templates design team writes a style guide for production and maintenanceteams.Each page on site is different but they all contain same elements. Define thoseelements. This allows you to build a consistent site where visitors can easier find itemsthey are looking for.Content of the typical style guide: •  Column width •  Mouseover states •  Link colors •  Other colors •  Fonts •  Headline and other text sizes •  Image dimensions •  Animation effects •  Usage of logo (safety areas)
  58. 58. 59ProductionOptimization of images is extremely important for the good quality results.Learn who to use PhotoShop!Slicing is a part of the production where all required image files areproduced from the graphical master template. Slices are joint together duringthe building of the siteHTML-templates, are circulated within production team. These “pages”contain already information pieces like: •  Global navigation •  Basic layout (TABLE, DIV) •  FONT-definitions •  ALT- and META text as an example (who writes them?) •  Document specific comments <!-- comment -->Test HTML template
  59. 59. 60Production #2Building is done either with HTML-editor, by hand (or with Flashdevelopment tool)Add content to pages (or feeding content to CMS)Light scripting with javascript (or Actionscript / flash)Even programmable page (.asp, .php etc) require one or more HTML-template where programming is addedAdd other media typesLook at the size of the pagte. Over 100 kbyte is typically too heavy.Hand coding or editor?Version control?
  60. 60. 61Quality assuranceSite is ready (almost). Time to quality assuranceQuality Manager / EngineerNever, never publish a site without quality assurance. Never.Broken links. Placeholder-text and -images. Functionality bugs. Wrongcontent is wrong place.Testing environment should be similar than final server environment(dynamic material)Prioritizing finding and fixing
  61. 61. 62Phase 5 -Launch & follow-up
  62. 62. 63PHASE 5: Launch & follow-upSetting up final production environmentFile transfer to the www-server (FTP, SCP)MarketingTraffic measurement / Google Analytics •  Most visited pages •  Most used functionalities •  Most downloaded files •  etc
  63. 63. 64What ever you do.. Whatever you decide to design… Don´t make me think!
  64. 64. 65Thanks!