Workshop with ROCKWOOL editors Helle Jensen, Senior ux consultant
Agenda 1. Intro to UX and customer journeys 2. Intro to web content 3. Intro to blocks in EpiServer 4. Content guidelines 5. Exercise: Adaptation of master page 6. Questions and wrap-up
UX & Customer journeys
The user's objective is to find the right product as fast as possible
Find the right product as fast as possible Do: Give advice Guide towards segments and product types Be relevant. At all times Don't: Assume that the user has plenty of time Think you are talking to someone who knows your business as well as you do Assume that there is just one standard user journey Assume that everyone starts on the front page
You never know where the user has just been or where he is going next. Online and offline.
Content funnel on product related pages In order to help the user on each page, remember to build a hierarchy: Product guidance Convince Advice Help
Product guidance Examples: Promotion banners "working with..." Product filters Sub segment selections (e.g. flat roof vs. pitched roof) Construction types Product selction tools (colour cards, texture swatches, virtual tools, etc.)
Convince Examples: Cases Benefits (fire safety, durability, etc...) Statements
Advice Example: How-to guides Videos Advice on energy efficiency, environmentally friendly builds, etc.
Help Examples: FAQ Installer and sales reps finders Tools (e.g. BIM solution finder)
Content funnel on advice pages (not product related) In order to help the user on each page, remember to build a hierarchy: Identify problem Self service Help
Identify problem Examples: FAQ Sub sections ("advice about x y z")
Self service Examples: How-to guides Tools (e.g. BIM solution finder) Calculators etc.
Help Examples: Installer and sales reps finders Tools (e.g. BIM solution finder) Contact relevant departments
An introduction to web content
Online reading behavior differs considerably from normal offline reading habits. Here are 3 things to keep in mind when producing web content.
1 The average attention span of a human being is now down to 8 seconds.* *Microsoft Corporation, 2015, study of 2000 recipie
2 Studies on online behavior find that users take time to read at most 28 % of the words on a web page. *Nielsen Norman Group: User Experience Rese
3 Over the last 5 years, the mobile share of visits have grown from an average of 6 % to 40 % of all global web pages served.* Statista 2016
Introducing a set of web guidelines
Before you begin Always consider the following questions and their implications for the content you are about to create: 1. Who is your audience? Consider the target of the page in question. What are his needs and characteristics, and what is the context? 2. What is your primary message? Do you just one clear takeaway? And it is relevant to your identified target? 3. What is your goal? Have a clear goal for what you want the target to do after reading your content.
Applying the Core Model might even be a helpful exercise User needs & context Page type Business goals Inward paths Core content Forward paths 23
7 criteria for great content
Scannable Well-structured Contextual Actionable Personal Searchable Multi-format
Scannable 1 Web readers are busy readers, therefore they scan rather than read content. Great web content makes it easy for the user to quickly scan the page to find the essentials (links, CTA, key message). Do s and don ts # Write short paragraphs Avoid just having one large chunk. Instead write shorter paragraphs of no more than 5-7 sentences each. # Avoid long, complex sentences Proper punctuation and short sentences of maximum 20 words will reduce the complexity of your text. Avoid starting all sentences with the same word, and remember that starting with and, but and or is okay, if it reduces complexity. # Use formatting Use bullets, tables and link boxes to break up the text and make core information stand out. # Make it visually appealing Use enough spacing to help scannability, and avoid pages that consist of text alone.
#1 Example Use of headings and subheadings Short paragraphs Use of bullet points + boxes to separate relevant info and links Easy digestible content chunks
2 Well-structured When writing for web, you need to instantly address the user s primary questions. If users don t immediately find what they re looking for, they will leave the page. Ideally, they should be able to do so without even having to read the body copy. Do s and don ts # Put the essentials first Use the journalism model of the inverted pyramid. Start with the content that is most important to your audience, then provide additional details. # Work with your headings Main and subheadings play a key role for scannability and the perceived relevance of your text. Make sure they quickly establish the topic. # Use subheadings as labels Keep your subheadings short and concise and include SEO keywords. Think of them as helpful labels, which should describe or summarize the content that follows. Questions often make good subheadings, as they instantly tell the user what to find in the paragraph.
#2 Example Main heading quickly establishing the theme Short and concise subheadings Subheadings summarizing essence of each paragraph Subheadings answering the why, what and how of the reader
Contextual 3 You can t always control, which pages people go to first on the website, so don t consider a page a starting or an end point. Do s and don ts # Each page should be independent You shouldn t rely on your reader having browsed around your website or already knowing about the topic, so any page must make sense in its own. # Link to related and relevant content Aim to keep a page as simple as possible by not trying to include all information in one page alone. Instead prolong the user journey by providing links to related and relevant content, e.g. products, cases, tools and downloads. # Guide the reader to the next step Never leave your reader hanging at the end of the page. Take a minute to figure out what your user is looking for and meet these needs by clearly highlighting links and CTA s. For many pages it will also make sense to finish with a link panel.
#3 Example Including multiple links for detailed info Including links to different content types e.g. products, category and cases
4 Multi-format Think of content as more than just text! The great thing about web content is the opportunity to use multiple formats, thereby providing a more interactive and dynamic user experience. Do s and don ts # Use various formats Content is more than text! Use video, photos, statement panels etc. to improve page scannability. # Make the content interactive Build your page with elements urging the reader to scroll, click and type whenever possible. #The medium is the message Think of the best possible medium to deliver the message. Some topics may be too complex for text alone and work better with video, photos, 3D renderings, icons etc.
#4 Example: ROCKWOOL Use of text, diagram, download, page links and cases
5 Actionable You should have a clearly defined goal with every content piece, e.g. know exactly what you want the user to do after engaging with your content. Do s and don ts # Encourage action Every page should have a clear Call-to-Action and links to related content. If a content piece doesn t encourage concrete action or guide the user somewhere, it is probably not relevant and should be tossed! # Create page conversations In order to achieve the desired action/reaction from the reader, try thinking of the content piece as a conversation, first helping the user by answering all questions, then trying to convince.
#5 Example Case studies and video as linking elements Links box and link panels to prolong journey and serving as clear CTA s
6 Personal The website represents an important costumer touch point and the way you write will reflect on how your company is perceived by the user. You want to connect with the reader, do so by writing in a personal manner, which is consistent with your brand. Do s and don ts # Speak in actives Passives will create a more complex sentence structure and a distance between you and the user. # Address the reader directly Do so by using personal pronouns such as you, we and I instead of clients, the company etc. This gives your copy a more personal and informal feel, which the reader can relate to. # Keep it simple Don t expect the user to already have knowledge on the topic, nor to understand technical and industry specific language. Especially top-layers should be kept as simple as possible. Technical language and advanced explanations belong at a deeper (product) level.
Example #6 Real people portrayed in photos Use of personal pronouns Addressing the user directly Clear contact info
7 Searchable Even great content is worthless if the user isn t able to find it. Therefore, you must as a minimum think of a few SEO optimizing means when writing content do so by following this checklist, which is further explained in the following slides More info in tomorrow s session with Rasmus
Page structure sum-up
Page structure Do s Break the boxy layout by: 1. Varying the usage of block types, 2. varying the composition of block widths and 3. Using statement panels/no image panels Combine related content topics in the same area of the page, e.g. the two panels in vertical grids should be of the same type or of related topics e.g. cases, advice, 4in1s etc. Don t s Put two of the same elements right after each other nor two vertical banners using the same width Mix different content themes inside the same horizontal banner
Examples Avoid having the same element twice in a row nor the same combination of blocks. Instead compose your page using different block types and widths.
Examples Use statement panels or the no image option for added spacing between blocks and to break th
Examples Combine related topics in the same horizontal banners or vertical grids and avoid mixing content types e.g. help elements are combined in the example to the left, advice in the grid to the right.
EpiServer blocks
A flexible CMS-system Working in EpiServer, you have a range of different blocks available allowing you to pick and choose to meet your needs and compose each page in the best possible way.
Block types 1. Generic blocks: Includes text, image, sliders and tools 2. Sidebar blocks: Includes facts, links and image/video to be inserted as part of another block 3. Data blocks: Includes slides, links and items, which do not make out a panel in themselves 4. Product blocks: Includes all blocks used for product pages 5. Other: search, form builders
Things to remember Many blocks have several layout options. Consider the following: 1. Title size 2. No image option 3. Width 4. Link or button 5. And finally, don t forget to check layout on all device sizes
Block variations: Title size
Block variations: Width 1 / 1 Title and text appears 1 / 2 Title is displayed on overlay. Label shows Text disappears 1 / 3 Title is shown below image Label shows Text disappears
Block variations: Image/no image
Block variations: Link or button
Block variations: Responsive layout 1 / 1 Title on top of video and related videos to the right. 1 / 2 Title on top of video. No related videos. 1 / 3 Title is shown below video. No related videos.
Block variations: Responsive layout 1 / 1 Title and text appears 1 / 2 Title and intro text appears 1 / 3 Title and intro text is shown below image
CTA s, headlines, intro texts, labels Content Guidelines
CTA guidelines Call to actions can be highlighted in two different ways; 1) using buttons or 2) using links. 1 button per horizontal banner For the vertical grid, make the stacked text/image panels links, the half width element a button Buttons are for primary CTA s, links for secondary. If none of the above applies, make the shorter text a button and the longer one a link.
Examples
Headlines/titles The headline should be a clear indicator of what the content block is about: Include a keyword from the content piece you are linking to. Beware of over-usage, e.g. don t repeat the keyword in CTA and label as well. Keep the title as short as possible 4-7 words should be sufficient, but it also depends on the block type, use of icons, labels etc. When more text is needed: Use intro text to elaborate Or you may omit the title and use text field instead, as this will be displayed in a smaller font
Examples Service panel used with no title, but text only Varied use of keywords in title and CTA
Text and intro texts Most blocks give you the option to add an (intro) text. Use this to elaborate on the title. It should add something extra and only be used when the headline cannot stand alone. Limit the length. Aim for 80-150 characters to make sure it works across the different widths. Beware that depending on the block, intro text may not appear in mobile.
Examples Different layout options for intro text in full width 1. Article long text panel: text in overlay text box 2. Article panel: text written directly on image Intro text used as a small appetizer/promotion of the content piece
Labels Labels are used to guide the user and allow him to quickly identify the topic and content type. They are available in the following block types: Text panel Text and image panel Article panel (will not be displayed in full width) Article panel long text
Examples 1) On product segment pages 2) On cases 3) On tools, advice etc.
Exercise Based on the master site, try to build a local version of the given page, adding or taking away blocks. Time: 30 minutes
Questions and input?