• Home

  • Design

  • LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
43
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE DIRK JESSE // WEBKONGRESS ERLANGEN 2014

LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

  • Upload
    djesse

  • View
    626

  • Download
    4

Tags:

Embed Size (px)

DESCRIPTION

Die mobile Nutzung des Internets stellt Webentwickler vor neue Herausforderungen bei der Planung und Entwicklung von Webseiten. Der damit einhergehende, sich verändernde Workflow bedingt eine frühzeitige Verlagerung der Konzept- und Entwurfsarbeit in den Browser. Dieser Idee folgend entwickelt Dirk Jesse seit ca. 4 Jahren mit "Thinkin' Tags" eine browserbasierte Entwicklungsumgebung zur Erstellung von Wireframes, Mockups und Prototypen. Der Vortrag gibt Einblicke in die Konzeption und Entwicklung der Benutzeroberfläche von "Thinkin' Tags" aus dem Blickwinkel der Usability. Daher geht es nicht um die technische Umsetzung, sondern um Fragen, wie z.B. ein visuell orientierter Workflow robust gestaltet werden kann? Wie unterscheidet sich die Arbeit in einer Webapplikation von der Arbeit mit klassischen Desktoptools? Wodurch wird eine Benutzeroberfläche nicht nur performant, sondern auch nutzerfreundlich?

Citation preview

Page 1: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

LESSONS LEARNED FROM THE DESIGN

OF AN USER INTERFACEDIRK JESSE // WEBKONGRESS ERLANGEN 2014

Page 2: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

MOTIVATIONA BETTER WORKFLOW FOR THE RESPONSIVE WEB

Page 3: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

PhotoshopInDesign

Fireworks

PowerpointKeynote

Sublime Text

Coda

Espresso

Aptana Studio

Netbeans

Komodo Edit

Page 4: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Medienbruch […] Wechsel des informationstragenden Mediums innerhalb eines Informationsbeschaffungs- oder -verarbeitungsprozesses.

Wikipedia

Page 5: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

VISIONSTREAMLINE WEBDESIGN WORKFLOW

Page 6: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

HTML5 CSS3 JavaScript

ENTWURFSWERKZEUGE

Page 7: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

„Build designs in the environment where they ultimately live … right from the beginning.“

Meagan Fisher // Designing for today's web: working in a post-psd world!BEYOND TELLERRAND 2013

Page 8: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Inhalte und Struktur

Funktion und Usability

Typographie und Design

Rendering Qualität und Performance

Page 9: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

INSPIRATIONTHINGS THAT I ENJOY WORKING WITH

Page 10: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

HTMLAdobe Dreamweaver

!• DOM Brotkrümelnavigation • kontextabhängige Dialoge

Page 11: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

CSSSublime Text

!• Syntax Highlighting • CSS Hinting

Page 12: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

DebuggingFirebug!!• CSS Cascade View • Live Editing (HTML/CSS) • Trigger for Pseudo-Classes

Page 13: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

UI/UXAdobe Lightroom!!• Dunkles User Interface • Modul Navigation • Panel Layout

Page 14: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

KONZEPTION & UMSETZUNGVon der Idee zur Web Applikation

Page 15: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Bildbearbeitung

Page 16: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Bildbearbeitung

Page 17: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Bildbearbeitung

85%5% 10%

Page 18: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Web Design

Page 19: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Web Design

Page 20: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Web Design

25%25% 50%

Page 21: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Web Design

Page 22: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Web Design

50%50%

Page 23: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

DOM Navigation

Page 24: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

CSS Inspector

Page 25: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

CSS Editing & Hinting

CSS Texteditor

Page 26: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

CSS Editing & Hinting

Page 27: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Strukturplanung Layoutkonzeption Design

Visueller Workflow

<header>

<main>

<footer>

<article>

<article>

<aside>

article

article aside

header

footer

main

Page 28: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Demo: Visueller Workflow

Page 29: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

UI FARBSCHEMA

Page 30: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

KONTRAST

Page 31: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

FARBE

Page 32: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

UI Farbkonzept

Page 33: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

UI Farbkonzept

Page 34: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

UI Farbkonzept (neu)

Page 35: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

UI Farbkonzept (neu)

Page 36: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

USER EXPERIENCEVerdammt nochmal, wie bekomme ich … ?

Page 37: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Demo: DateiauswahlDesktop Umgebung Browser

Page 38: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Content Aware Tabs Highlighting

Page 39: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Custom Form Elements Animierte Checkboxen

Page 40: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

Unmittelbares UI Feedback Überprüfung von CSS Selektoren

Page 41: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

STATUS QUOThinkin‘ Tags v0.5 (alpha)

Page 42: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
Page 43: LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

VIELEN DANK

www.thinkintags.com !@djesse plus.google.com/+DirkJesse


Coreworx Interface Management Program Deployment Lessons Learned from the Middle East Paul Tompkins June 2012

Coreworx Interface Management Program Deployment Lessons Learned from the Middle East Paul Tompkins June 2012

Documents
RabbitMQ at Scale, Lessons Learned - OpenStack€¦ · RabbitMQ at Scale, Lessons Learned Matthew Popow, ... • No heartbeat or QoS ... # Add udev rule to Set Tap Interface TX Queue

RabbitMQ at Scale, Lessons Learned - OpenStack€¦ · RabbitMQ at Scale, Lessons Learned Matthew Popow, ... • No heartbeat or QoS ... # Add udev rule to Set Tap Interface TX Queue

Documents
Lessons Learned

Lessons Learned

Technology
Lessons Learned Globally - Campaign for Tobacco-Free Kids...Process lessons learned 2. Content lessons learned See next page for lists of these lessons learned. 7 | Lessons Learned

Lessons Learned Globally - Campaign for Tobacco-Free Kids...Process lessons learned 2. Content lessons learned See next page for lists of these lessons learned. 7 | Lessons Learned

Documents
Lessons Learned:

Lessons Learned:

Documents
Space Test Program Standard Interface Vehicle Lessons ...Space Test Program Standard Interface Vehicle Lessons Learned (STP-SIV) Mr. Mike Marlow Chief Engineer, Space Development Branch

Space Test Program Standard Interface Vehicle Lessons ...Space Test Program Standard Interface Vehicle Lessons Learned (STP-SIV) Mr. Mike Marlow Chief Engineer, Space Development Branch

Documents
Lessons Learned Handbook · 2011-10-12 · • Lessons Learned, an adjective, describes anything related to a Lessons Learned procedure. E.g. Lessons Learned process, Lessons Learned

Lessons Learned Handbook · 2011-10-12 · • Lessons Learned, an adjective, describes anything related to a Lessons Learned procedure. E.g. Lessons Learned process, Lessons Learned

Documents
Lessons Learned and Lessons to Be Learned: Investment Law & … · 2014. 4. 30. · 1 Lessons Learned and Lessons to Be Learned: Investment Law & Development for Developed Countries

Lessons Learned and Lessons to Be Learned: Investment Law & … · 2014. 4. 30. · 1 Lessons Learned and Lessons to Be Learned: Investment Law & Development for Developed Countries

Documents
Lessons Learned from Failures Dec 2014 - MTS Houston · 212 on board, 123 perished, 89 survivors ... Lessons Learned Lessons Learned. ... Lessons Learned from Failures Dec 2014.pptx

Lessons Learned from Failures Dec 2014 - MTS Houston · 212 on board, 123 perished, 89 survivors ... Lessons Learned Lessons Learned. ... Lessons Learned from Failures Dec 2014.pptx

Documents
Lean lessons learned - lean startup methodology and lessons learned from Blossom

Lean lessons learned - lean startup methodology and lessons learned from Blossom

Small Business & Entrepreneurship
PATCHING LESSONS LEARNED: An Interesting Perspective · PATCHING LESSONS LEARNED: An Interesting ... 4 ISO 9001:2008 ... 4 The Query Engine will offer an easy to use user interface

PATCHING LESSONS LEARNED: An Interesting Perspective · PATCHING LESSONS LEARNED: An Interesting ... 4 ISO 9001:2008 ... 4 The Query Engine will offer an easy to use user interface

Documents
ASSESSMENT & LESSONS LEARNED FROM AFRICAN DIASPORA MARKETPLACEpdf.usaid.gov/pdf_docs/PDACT256.pdf · ASSESSMENT & LESSONS LEARNED FROM AFRICAN ... ASSESSMENT & LESSONS LEARNED FROM

ASSESSMENT & LESSONS LEARNED FROM AFRICAN DIASPORA MARKETPLACEpdf.usaid.gov/pdf_docs/PDACT256.pdf · ASSESSMENT & LESSONS LEARNED FROM AFRICAN ... ASSESSMENT & LESSONS LEARNED FROM

Documents
Lessons learned from accident investigation Seminar/IHS - Day 2... · LESSONS LEARNED FROM OTHERS LESSONS LEARNED FROM UAE ... Lessons Learned . ... Dealing with survivors and bereaved

Lessons learned from accident investigation Seminar/IHS - Day 2... · LESSONS LEARNED FROM OTHERS LESSONS LEARNED FROM UAE ... Lessons Learned . ... Dealing with survivors and bereaved

Documents
Lessons learneD

Lessons learneD

Documents
Lessons Learned Remote PM+ Cohort Integrated K+S · Lessons Learned Below are key lessons learned on providing Remote PM+ Training of Helpers. These lessons learned are based off

Lessons Learned Remote PM+ Cohort Integrated K+S · Lessons Learned Below are key lessons learned on providing Remote PM+ Training of Helpers. These lessons learned are based off

Documents
Lessons Learned Events at SLAC · 2012-09-14 · Lessons Learned Events: Summary Comments . Important to identify and communicate lessons learned! Lessons learned and near misses

Lessons Learned Events at SLAC · 2012-09-14 · Lessons Learned Events: Summary Comments . Important to identify and communicate lessons learned! Lessons learned and near misses

Documents
Lessons Learned from “Lessons Learned” · 2 LESSONS LEARNED FROM “LESSONS LEARNED” 2. The NRC set safety goals in its Safety Goal Policy Statement, initiated not long after

Lessons Learned from “Lessons Learned” · 2 LESSONS LEARNED FROM “LESSONS LEARNED” 2. The NRC set safety goals in its Safety Goal Policy Statement, initiated not long after

Documents
LESSONS LEARNED AND GOOD PRACTICES...Lessons Learned Lessons are learned for sharing and applying to similar projects. Project lessons are learned from experiences, both inspiring

LESSONS LEARNED AND GOOD PRACTICES...Lessons Learned Lessons are learned for sharing and applying to similar projects. Project lessons are learned from experiences, both inspiring

Documents
LEARNED LESSONS:

LEARNED LESSONS:

Documents