Download - Web applications-designing-for-efficiency

Transcript
Page 1: Web applications-designing-for-efficiency

gilesthomas.gilesadamthomas.com

Web Applications

& Designing For E�ciency

Page 2: Web applications-designing-for-efficiency

gilesthomas.gilesadamthomas.com

E�ciency is King

Unlike product or services websites web applications

are used repetitively, often many times a day by the

same person completing the same task again and

again. Because of this core di�erence when designing

for web applications we need to focus on e�ciency.

Page 3: Web applications-designing-for-efficiency

gilesthomas.gilesadamthomas.com

To-Do lists are a very popular app category, let’s

create an example:

Imagine yourself in your app dashboard as in the

example below. To create a to-do you would click the

create button, taking you to a view or screen solely for

to-do creation. You fill out the to-do details and click

create. You are then taken back to your list of to-do’s.

Page 4: Web applications-designing-for-efficiency

Even for a simple task such as this we require two

page refreshes and two views or screens. Depending

on the users internet connection speed this could take

a few seconds each time. Imagine this scaled over a

day or a week, not very e�cient for the user.

Page 5: Web applications-designing-for-efficiency

Instead an e�cient design would be to add the to-do

inline like the example below in the app Trello. An

animation or alert can communicate to the user that

the item has been added to the list and saved. The

animation should never slow down the process

though. This can be achieved technically using ajax to

update the database with the users information

without refreshing the page.

gilesthomas.gilesadamthomas.com

Page 6: Web applications-designing-for-efficiency

This is designing for e�ciency, taking the most

important and commonly used tasks and iterating until

they become e�ortless for the user.

gilesthomas.gilesadamthomas.com

Page 7: Web applications-designing-for-efficiency

Know Your User

In order to create e�cient interfaces for your app you

must understand your user. A common mistake is to

become too wrapped up in the apps complexity.As

Steve Krug said,:

“Developers like complexity; they enjoy discovering

how something works.”

You user is not you or your client or your web design

team if you are the client.

Page 8: Web applications-designing-for-efficiency

There are many well known techniques for identifying

users:

Stakeholder Interviews: simply asking questions about

the users knowledge of computers and which existing

software they know and use. This is key, designing

using known patterns can greatly improve the learn-

ability and memorability of your app. Meaning how fast

people learn and remember how to navigate and per-

forms tasks in the app.

Page 9: Web applications-designing-for-efficiency

Shadowing or Observation: This can provide more in-

formation on how the user performs tasks and

common errors or mistakes they make.

User Personas: If you don’t have access to your user

group or are unaware of who they are yet you can

create user personas. User personas represent real

users, their motivations and goals. See the example

below.

Page 10: Web applications-designing-for-efficiency

Consistency

Another key factor when designing web applications

for e�ciency is consistency. The interface should be

consistent throughout the web application, this in-

cludes navigation, section headers, colours (especially

for calls to action) terminology; people underestimate

the importance of clear and simple text! This will again

improve how fast people learn and remember their

way around the app.

Page 11: Web applications-designing-for-efficiency

Familiarity

Using appropriate metaphors from the users past soft-

ware experience can greatly increase the e�ciency of

your web application. Folders are a great example

here, all computer users know and use folders to or-

ganise and find information. Using relevant design pat-

terns early in your application design process is key to

getting this right from the get go.

gilesthomas.gilesadamthomas.com

Page 12: Web applications-designing-for-efficiency

Familiarity

Using appropriate metaphors from the users past soft-

ware experience can greatly increase the e�ciency of

your web application. Folders are a great example

here, all computer users know and use folders to or-

ganise and find information. Using relevant design pat-

terns early in your application design process is key to

getting this right from the get go.

Less is Faster

Simplicity is important in creating e�cient web appli-

cation, if the user is overloaded with information they

won’t find what they need to complete their tasks. In

general an app that has fewer features can often

prove to be more successful than a bloated and poorly

optimised app. Boil down your features to the neces-

sary few and do the same when designing your inter-

faces.

Page 13: Web applications-designing-for-efficiency

Consistency

Another key factor when designing web applications

for e�ciency is consistency. The interface should be

consistent throughout the web application, this in-

cludes navigation, section headers, colours (especially

for calls to action) terminology; people underestimate

the importance of clear and simple text! This will again

improve how fast people learn and remember their

way around the app.

CONNECT WITH ME

@GILESADAMTHOMAS

@WHOLEDS

WHOLEDESIGNSTUDIOS.COM

gilesthomas.gilesadamthomas.com