What's trending?

user experience agency

• Following presentation will look into various trends that have or will be coming into practise for the remainder of 2012.• So, what’s trending?Introduction

DesignLooking at what is trending with page design

Example: BBC website• A lot of sites going with a top navigation approach.• Adding a ‘more’ option, which lists less popular options.• Advantage: 1. Top navigation looks clean and simple. 2. Able to group options together.• Disadvantage: 1. What do you priorities? If you are trying to cater for all users, you might have a problem trying to priorities. 2. Need an effective way to present the “more” options.Light Weight Navigation Approach

• In general, moving items are being used more regularly. Share items on news sites such as Mashable.• Side or Top Navigation, which move down as you scroll down the page.• Advantage 1. Allows you to create longer pages with lots of content. 2. Navigation is easily accessible.• Disadvantage 1. Takes up on screen real estate. 2. Screen size. On small screens the navigation might not fit therefore part of it might be cut off.Moving Items

• Interactive mega-navs that allow users to engage with them. • Gives a clear overview, but highlighting particular sections. • AdvantageExample: ESPN 1. Highlight content 2. Interactive content added to mega-nav panels 3. Instant access to the content. • Disadvantage 1. Sub-navigation, how do users access content displayed.Example: Wimbledon Mega-Navs

• Using imagery as a visual & navigation aids.• The images used are representative of the information been presented.• Product (RED) website uses images really well.• Advantages Example: berndkammerer 1. Making your website more visual. 2. Creative approach, which adds more life to the website.• Disadvantages 1. Too many visual content might make the site too busy and hard to go around intuitively.Visuals & Imagery

• Larger fonts are being used increasingly. • A move away from cramping everything onto the screen. • Advantages: 1. “White” space. The page looks more cleaner. 2. Place focus on the important content. • Disadvantages: 1. Not ideal for smaller screens such as mobile phones.Example: Les Evades 2. Takes up too much onscreen real-estate. Large Text

• Preview allows users to get insight about a section before going into it for more information. • TED uses hover states. Users can hover over the image and get a snapshot. • Google Search presents a preview on click. • Advantages 1. Saves having users to navigate to another page. 2. Preview information presented when needed. Therefore you are not over crowding your page. • Disadvantages 1. Hover states such as one used on TED can’t be used on touch screens. 2. Adding another step in the journey. This Example: TED & might not be the best approach in some Google contexts.Clever Preview Approaches

Example: YouTube• Rather than having users navigate deep into a site to the main content, the content is hidden and only visible when the user needs it.• Advantages 1. Allowing users to access content on the page. 2. Makes the page more interactive.• Disadvantages 1. When everything is on one page, it is harder to present the content logically. 2. Can be overwhelming to the user if there are lots of functionality on one page. 3. Have to make the content areas obvious to the users.Expanding Content Areas

ArchitectLooking at what is trending with page architecture

• The increase in responsive web means there is more emphasis on grids. • There are a range of grids such as Fluid, Column drop, layout shifter, spaces, & off canvas as identified by Lukew • Advantages 1. It gives you a clear structural view of how the website changes over various screen sizes. 2. Chance to organise the content & set priority. • Disadvantages 1. Restricts your creativity. You have to think in terms of the grids set out. 2. Transitions from screen size to screen size is restricted.Grid Layouts

• With the Responsive Web becoming popular, it means that architects and designers will have to focus on mobile sites. • Mobile site forms a good foundation from which you create other sites from. • Advantages 1. Identify high priority first. 2. It is easier to add options to a site. Therefore starting in the simplest/critical view first then working forward is the best approach.Mobile First

• Most of the websites you will be seeing the months to come will likely incorporate things discussed in this presentation. • You should try and adapt these trends, but this doesn’t necessarily mean you should stick to them. • It’s always best to think out of the box and push the boundries!Last Word

That’s All FolksShean MalikUX ArchitectE: shean@zabisco.com

http://www.zabisco.com	356
http://www.raketablog.ru	34
http://zabisco.com	1

What's trending?

by Zabisco Digital on Jul 13, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 391

Statistics

What’s trending? Presentation Transcript