UX and Front-end

UX, FRONT-END AND BACK-ENDHow Front-end help Back-end and UX guys

Diego EisI love work with web. And I lost 55 pounds. ;-)

@diegoeis @tableless

http://tableless.com.br http://diegoeis.com http://slideshare.net/diegoeis

Let’s divideFirst of all we need divide and understand the sides.

Interactive DesignThis important guy is a scientist of behavior. He understand how will navigate and use all pages of system. They take business needs and product requirements and transform them into user-focused interface and experience.

Interface DesignerI like to name this guy simply like Designer. He will design the layout and the modules that will bring the interfaces concepts to life, cultivating customers and brands. They know how an beauty interface can sell and retain more costumers.

Back-endThey care about the environment and how the functionalities will work. All the server side logic of application, API structure and web services, databases integrations and many other processes.

Front-endVery short explain: Front-end is the guy that will implement the Layout created by Interface Designer and will study and apply the project specs explained in wireframe designed by Information Architecture.

What about UX?This is a long and boring discuss, but here we go: I think the way that UX name is applied is wrong. UX is not a concern of one team or one person. The client support cares about the User Experience. The dev and the Product Owner cares about it too. UX is not an exclusive name to a exclusive type of people in a project. All people involved in a project is an UX.

Let’s be clearAll people that works with web are responsible for user experience. Not only UX, UI or Front-end. This is also a concern of back-end, product owner, manager and all people involved to the project.

The common flow

Linear or parallelSometimes the flow needs to be linear, like in small projects like websites. But, with the adoption of web standards this flow can be parallel. This is awesome.

wireframe

design

front-end

back-end

wireframe

design front-end back-end

The broken flow

UX layout back-end

UX back-endfront-end

UX back-endfront-end

How Front-end can help Back-end?

HTMLMaintain an organized HTML, caring about semantic and structure.

Implement direct in back-end codeInstead deliver a static code to back-end, the front-end team can implement the html/css/javascript code directly into back-end code.

Consume APIIf Back-end deliver an API, the Front-end guys take care about all interface. Back-end don’t need to write any line of front-end code.

How Front-end can help UX?

PrototypesSometimes the tests with user need to be more real. Functional prototypes are more useful than squares in white background.

Information ArchitectureHTML semantic + SEO + information priority and evidence.

Visual and behavior standardsStandards of flow, visual interface, behavior and even functionality.

What front-end learn from UX team?

Information ArchitectOrganize and priorize information on page.

Understand visual patternsFront-end needs to know when the pattern of alignments, weight and size of elements are wrong.

Know what good design isUnderstand a little about design and how designers make your layouts.

What front-end learn from back-end team?

Manipulate informationsManipulate and use informations with the right tools and the right way.

LogicLearn programming logic to increase your skills.

OperationsUnderstand a little more how the environment of the project works.

A Framework helps allIf you work in a big company that have a big product or many products that share same visual interface, maybe it's a good idea to create a CSS Framework and define a common styleguide.

http://opensource.locaweb.com.br/locawebstyle/

HTML needs to be common to allIf exists one thing that back-end, front-end and UX teams needs to learn, this things is HTML. The HTML is influenced by all.

Let’s simplify this division

IMHO, the division: designer, front-end and back-end is broken.

Designing Programming

interface

photoshopillustrator

personas

usability

accessibility

semantic HTML

CSSruby

javascript

json

database

infrastructure

API

PHP

development environment

UX

UI

layout

AI

prototype

tests

python

JS for Interface

NodeJSEmberJS

In fact, having only one front-end developer in a team with other developers doing only server-side work is a recipe for disaster.

Don Roby bit.ly/18MX8cg

One of the reasons for poor design execution is that UX teams need to own more than just design. We need to own front-end development.

UX Matters http://bit.ly/ux-require-frontend

Goodbye!Let me know what you think!

@diegoeis @tableless

tableless.com.br

diegoeis.com

slideshare.net/diegoeis