Designing advanced internet applications

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

more share options
Embed For WordPress.com

Without related presentations

1 comments

Comments 1 - 1 of 1 previous next Post a comment

+ Vinter 3 weeks ago
Lecture held as introduction to http://media.csee.ltu.se/courses/m7011e/
Look at the notes to clarify slides.

Notes on slide 1

Lars HuringUX Designer, Vinter i Luleå.twitter.com/huringlars.huring@vintermail.sewww.vinterwebb.sewww.huring.se

First, a bit of explanation. What is user experience design Why is this relevant to me, i design websites.

How is this applicable to websites then?“User Experience (UX) in the online community is the practice of influencing how a person uses and experiences a particular website.”Basically: Design of website Information architecture Functions InteractionsIn the case of the assignment: Design & interactions with the puzzles Account management Feedback Accessibility, how to build a system for both kids and their parents and for different user levels.How is this accomplished...

Using a bunch of acronyms:Ajax,RIA,PSD,PHP,JS,SEO,GWT,.NET, HTML, CSS, GIF, JPG, SWF, FLV, SQL, Q&A, A+B, UI, Flex, jQuery...

RIA (Rich Internet Applications) Richness of desktop applications Saving Drag & drop Previews Direct editiding Feedback Resizing undo copy/paste Familiar features of the web Hyperlinks Bookmarks Tagging Browser Always accessible Sharing Community

Examples of rich internet applicationsYoutube.com – watch video, share, browse, comment, tag, upload, create.Gmail – Email client online and offline.Meebo – online instant messengerLovelyCharts – flow charts online. Save, undo, export.

Where to start? How to plan your application.

Start at the beginning. Use pen and paper, post-its on a wall, cards, cutouts, fridge magnets, whiteboards.Plan out your application, pen and paper is the best and most inexpensive way to try thingsStart by sketching out random bits of your application. A login-form, a button, the layout of the front page.Use your sketches to iterate on the design and the features. Use different kinds of pens and colours.Don’t worry about the design. Focus on the layout of the elements and the flow of the interactions.

Use the user.Set up user cases and specific goals that specific users (or ”Personas”) needs to accomplish on the website: Create an account Complete a puzzle Set up a test Find help on how to report a problem or a bug.This will help you to immediately find problems in the flow of the website, it will help you to identify problems early, and find solutions before they occur.Three basic types...

Information seeker: This type is looking for information. Where can i register What is this website? Do i need to pay?

Task focused: I need to complete this task. Register account Complete puzzle Create test for students

Create stuff Create a puzzle Create test for group Comment, other content creation

The design.Define your ”brand” What does the website stand for What associations do you want people to get What is your target audienceCollect inspiration from everywhere. Other websites Boardgames Magazines Photos Books PeopleConsider your target groups. What other sites do they visit? Are there patterns that they are used to? Do they have special needs. For instance, a website designed for children probably shouldn’t use text-buttons but instead use icons and illustrations to explain.

Simple design with good calls to action. The top navigation is only there as a ”last resort”, it’s not the important part of the website.

A different type of website. One would imagine that people that come to the website wants to: Get a feeling for the place if they’ve never been Find out what’s for lunch Find out what’s happening this evening Perhaps book a table, so they are looking for a phone number or email

A good way to ”judge” a websites design and layout is to look at websites in a foreign language. If you can still understand what the website does they’ve done a good job of designing it.Same goes for your own design. You might not have all the content to start with – and you don’t need it – use images and a visual language that supports your message and if you still can tell the purpose of the website with dummy images and lorem ipsum-text it’s not bad!

Keep it simple. Don’t over-design or over-build. Start out simple and iterate. Don’t be afraid to try things, they can always be changed later. Why not try out a couple of different things and test them out on a few friends, nothing formal, just a gut reaction. Focus on a pre-planned feature set and stick to it. Better to do a few things really good than to have many half-finished features

Small changes can make a big difference

How do i get people to come back?Where is the fun, the ”stickability”

Make the users interact with each other. Allow them to comment, like other peoples solutions, rate puzzles and judge the difficulty of problems. Allow users to challenge other people and their friends.People are no longer just ”consuming” content, they are in increasing amounts creating it as well – by sharing things on facebook, tweeting, blogging and uploading videos and pictures. Enable this ”creation” as well.(note: remember that you are dealing with children here as well. Don’t forget...)

Facebook ”like” button, easy to use, friends get notified when i ”like” something. A good way to keep track of interesting things without ”committing” to them. I want a ”like” button in real life now... Of course, comments...

Amazon ratings and reviews. Very good way to get peer-reviewed, ”unbiased” information.

Create a system that enables people to work together, either on or off-line.A good example for the assignment would be to find good ways for children and their parents to work togheter. Or challenge friends via social media, email or directly on the websiteAnd in the case of the parents not being any good at maths, allow for support :)

Facebook application Mafia Wars. Challenge other players and friends to compete against you. There is also a co-op element to this game, recruite more people and they’ll help you become the Godfather!

Challenges issued via facebook and Twitter.

If you’re building a games website you should be using game patterns.Problems should get more challenging as you ”level up”, maybe you unlock more ”levels” when you’ve completed a selected number of puzzles. Maybe you get ”experience points” for creating a puzzle.

Levels, experience points, collection, score – things that’s always been a part of games.

Hint system from Secret of the Monkey Island on the iPhone. Shake phone to get a hint, they ”ramp” as well. First hint is vague and then getting more and more ”do this now”

Stroke my ego. People love to compare and to see their name ”in print”When people register, allow them to create a ”gamercard” or ”profile page”Give rewards for all types of activities on the website, not just for completing puzzles.Show off the achievements on the profile pagesSet up leaderboards with links to profilesAllow people to compare scores

Top list, compare with friends

Achievements from Xbox live. Compare with friends and challenge yourself. Gives people a reason to keep playing as some achievements aren’t possible to get without making an effort or playing trough the game more than once.

Tools.Software, websites and API:s to use. Facebook Connect OpenID Plugins for content-sharing

Tools. There are many. This is just a few of the tools that i use.

Thanks!Questions?

2 Favorites

martin.ferronnierre favorited this 2 weeks ago
Vinter at Vinter, favorited this 3 weeks ago

Designing advanced internet applications - Presentation Transcript

Hello!
Lars Huring
UX Designer, Vinter.
twitter.com/huring
lars.huring@vintermail.se
www.vinterwebb.se
www.huring.se
UX Design? Huh?
“The practice of influencing how a person uses and experiences a particular website.”
Using good ideas and a
bunch of acronyms enables:
Accessible, feature-rich
well designed and usable
Internet applications
Where to start
http://www.flickr.com/photos/jasonrobb/
Use the user.
Information
seeker
Task focused
Create stuff
The design
Keep it simple
But where is the fun?
http://www.flickr.com/photos/34439638@N08/
Make it social
Make it co-op
(or head-to-head)
Make it level up
Stroke my ego
Tools
Firebug
jQuery
Google
MooTools
Aptana
Eclipse
Visual Studio
Firefox + addons
Subversion
SQLyog
Photoshop
GIMP
Paint.NET
LovelyCharts.com
Balsamiq
Pen & paper.
Jing
Illustrator
Photo credits
http://www.flickr.com/photos/34439638@N08/
http://www.flickr.com/photos/jasonrobb/
Other photos and screenshots done by me.
http://www.flickr.com/photos/huring
(Apart from the stormtrooper, mythbusters & dynamite-
Guy where i lost the url. Sorry!)
Thanks! Questions?
Lars Huring
UX Designer, Vinter.
twitter.com/huring
lars.huring@vintermail.se
www.vinterwebb.se
www.huring.se
twitter.com/huring
lars.huring@vintermail.se
www.vinterwebb.se
www.huring.se