what's trending?
DESCRIPTION
Look into what's the latest website trends are. What are websites currently doing?TRANSCRIPT
user experience agency
Introduction
• Following presentation will look into various trends that have or will be coming into practise for the remainder of 2012.
• So, what’s trending?
Design
Looking at what is trending with page design
• 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
Example: BBC website
Moving Items
• 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.
• Advantage1. Allows you to create longer pages with lots of
content.2. Navigation is easily accessible.
• Disadvantage1. 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.
Mega-Navs
• Interactive mega-navs that allow users to engage with them.
• Gives a clear overview, but highlighting particular sections.
• Advantage1. Highlight content2. Interactive content added to mega-nav
panels3. Instant access to the content.
• Disadvantage1. Sub-navigation, how do users access
content displayed.
Example: ESPN
Example: Wimbledon
Visuals & Imagery
• Using imagery as a visual & navigation aids.
• The images used are representative of the information been presented.
• Product (RED) website uses images really well.
• Advantages1. Making your website more visual.2. Creative approach, which adds more life to
the website.
• Disadvantages1. Too many visual content might make the site
too busy and hard to go around intuitively.
Example: berndkammerer
Large Text
• 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. 2. Takes up too much onscreen real-estate.
Example: Les Evades
Clever Preview Approaches
Example: TED & Google
• 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.
• Advantages1. Saves having users to navigate to another
page.2. Preview information presented when needed.
Therefore you are not over crowding your page.
• Disadvantages1. Hover states such as one used on TED can’t be
used on touch screens.2. Adding another step in the journey. This
might not be the best approach in some contexts.
Expanding Content Areas
• 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.
• Advantages1. Allowing users to access content on the page.2. Makes the page more interactive.
• Disadvantages1. 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.
Example: YouTube
Architect
Looking at what is trending with page architecture
Grid Layouts
• 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
• Advantages1. It gives you a clear structural view of how the
website changes over various screen sizes.2. Chance to organise the content & set priority.
• Disadvantages1. Restricts your creativity. You have to think in
terms of the grids set out. 2. Transitions from screen size to screen size is
restricted.
Mobile First
• 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.
• Advantages1. 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.
Last Word
• 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!
