application.flash.web.design

Desktop-Anwendung

Das Erscheinungsbild und die Funktion von reinen Desktop-Anwendung (Desktop-Application) hat sich über dem Zeitraum der letzten 10 Jahre stark verändert. Wurden früher Anwendungen in Form von Software-Installationen an die Erfordernisse der Betriebssysteme angepaßt, erfolgt heute bei Web-Anwendungen die Interaktion mit dem Benutzer ausschließlich über einem Webbrowser.

  1. Die Zukunft von Web-Anwendungen liegt bei browserbasierenden Lösungen
Web-Anwendungen werden ausschließlich auf einem Webserver (inkl. der Datenbank und der Businesslogik) ausgeführt. Die Interaktion mit dem Benutzer (usercase) erfolgt über HTML, JavaScript (AJAX-Anwendungen, Framework wie Mootools, etc ), Java (FX), Flash™- oder Silverlight™-Plugins. Der Austausch der Daten findet über eine Technik zur Realisierung von Interprozesskommunikation mit Hilfe eines Medienservers statt. Die dazu notwendigen Plattformen wie z.B: OpenLaszlo, Silverlight™ und Adobe Flex/Flash™ bieten neben Ihren Werkzeugen für XML-basierende und objektorientierende Rich-Media-Anwendungen ansprechende Möglichkeiten zur Gestaltung des Interface-Design.
  1. Interaktive Oberflächen direkt auf dem Desktop
Mit Hilfe von plattformunabhängigen Laufzeitumgebung wie "AIR" oder die von uns implementierten SWF-Wrappern können ebenso interaktive Oberflächen wie hochauflösende Videosequenzen, direkt auf den Desktop gebracht werden. Mit der Möglichkeit TCP/IP Internetverbindungen aufzubauen und "Binary Sockets" zu nutzen, verschwinden die Grenzen zwischen Desktop und Internet. Daten können bidirektional auf Webserver übertragen, verarbeitet und ausgetauscht werden. Funktionen wie "Drag and Drop", "Copy and Paste" und Zugriff auf Dateien leisten bei der Erledigung der Handlungsschritte direkte Hilfe.
  1. Webanwendungen: Mit Widgets Dienste miteinander kombinieren
Im Zuge der Verlagerung von lokalen Anwendungen hin zu Diensten bzw. Webservices, die über das Netzwerk bereitgestellt werden, wird der Benutzer zum Gestalter situationsbezogner Anwendungen. Mit Hilfe von Widgets und dessen standardisierten Schnittstellen (Bspw. Atom Feeds) lassen sich leistungsstarke Services mittels Operatoren über ihre Ports verbinden (Wiring) und zusammenbauen. Über spezielle Mashup-Werkzeuge bzw. Widget-Aggregatoren findet die Funktionsmodellierung statt; als Ergebnis der Komposition erhält man die fertige Webanwendung.
  1. Vektorbasierende Darstellung von Bedienoberflächen mit Hilfe von XAML und WPF
Mit dem Silverlight-Plugin ist es möglich, neben dem etablierten Flash™-Plugin [Aktuelle Version: Astro] Multimediaformate innerhalb des Browser in Verbindung eines interaktiven Designs darzustellen. Die dazu verwendete Beschreibungssprache baut auf eine neue Grafik-Schnittstelle (WPF) auf und ist Teil des .NET Framework.
  1. Design und Nutzerführung muß immer auf den Benutzer ausgerichtet sein
Die Usability beschreibt bei interaktiven bzw. elektronischen Medien sowohl die hohe Gebrauchstauglichkeit bzw. Benutzerfreundlichkeit als auch die technische Effizienz mit der man diese Ziele erreicht. Sowohl die Grundsätzen der Software-Ergonomie wie auch die tatsächlich erlebte Nutzungsqualität und die gesammelte User Experience (Bedienerlebnis) spielen dabei eine große Rolle. Oberstes Ziel dabei ist, die Platzierung der Inhalte und der Funktionsgruppen stets einheitlich und für alle Anwender vorhersehbar zu gestalten. Insbesondere bei der Entwicklung von Rich Web Applikation müssen die Erwartungen der Webbenutzer und die Möglichkeiten und Grenzen des Online-Mediums berücksichtigt werden.
  1. Nutzer schätzen Qualität und Glaubwürdigkeit (Subjective Satisfaction)
  2. Nutzer sind ungeduldig (thinking fluidly)
  3. Nutzer treffen keine optimalen Entscheidungen
  4. Nutzer folgen Ihrer Intuition
  5. Nutzer wollen Kontrolle haben (life-cycle)
Besondere Beachtung bei der Umsetzung spielen dabei die Gesetze der Einfachheit (http://lawsofsimplicity.com/) und die Thesen von Jakob Nielson.

web.design

Das Webdesign beschreibt ein komplexes Ökosystem, das sich aus den verschiedensten Einflüssen aus Film, Fernsehen, Videospiel, Animation, Musikkomposition, Software, Kommerz, Kultur des Benutzerverhalten, Informationsarchitektur und Grafikdesign zusammensetzt. Im einzelnen kann man folgende Erfahrungswerte beschreiben:

  1. Vorteile von Trennung von Designvorlagen und Inhalte
Die Navigation, Newsbereiche, Listen - sprich das gesamte Layout ist vom Inhalt getrennt. Inhalte (Content) werden unabhängig bearbeitet und verwaltet (Management). Wir setzen nicht auf ein festes Erscheinungsbild eines Layouts, sondern auf Techniken, die die Seitendarstellung automatisch an die Vorgaben der Endgeräte anpassen. Idealerweise liegen alle Inhalte in einer gültigen Form vor und gewährleisten damit eine einwandfreie Funktionalität in aktuellen und zukünftigen Browsern. Das Betrifft insbesondere die Agenten für das Mobile Web (iPhone) und Suchmaschinen und im Speziellen für Vorlesesoftware.
  1. Design, Architektur und Technologie bilden die Hauptpfeiler des Webdesign

Abbildung mit den drei Hauptbereichen - Design, Architektur und Technologie

  1. Anerkannte Standards für Inhalt, Design und technische Implementierung

Die wichtigste Voraussetzung für die barrierefreie Nutzung von Webseiten ist natürlich deren Aufbereitung nach den gängigen Regeln der Technik – insbesondere nach den W3C-Spezifikationen für HTML 4.01 bzw. XHTML1.x sowie den Web Content Accessibility Guidelines(WCAG 1.0 bzw. 2.0).

  1. Semantisch einwandfreies Markup (ohne Tabellen) und die Verwendung von Autoren-Stylsheets (CSS)
  2. Strikte Trennung von Layout und Inhalte
  3. Programmatische Zuordnung der Daten zu ihren Metadaten (web accessibility evaluation tool)
  4. Höchste W3C-Konformität (Strict)
  5. Berücksichtigung der Web Content Accessibility Guidelines*
  6. Wir achten die Techniken zur Erhöhung der Bedienbarkeit
Mindestens "Level A". Höher nach Anfrage.

  1. Leitlinien für die Erstellung von Webdesign
  1. Auf Zielgruppen zugeschnittene Inhalte, prägnant und kompakt dargestellt.
  2. Verwendung etablierter Navigationslösungen
  3. An die Aufgabe angemessener Interaktionsgrad.
  4. Utility-Navigation, Kontaktinformationen und Formulare sind jederzeit sichtbar und leicht verständlich
  5. Bereiche für variablen Inhalt (Web-CMS) sind skarlierbar, flexibel und wachsen mit dem Portfolio
  6. Ausbalancierte Navigationsoptionen mit richtige Beschriftungen und konsistenter Farbcodierung (Labeling)
  7. Seitenüberschriften sind synchron und konsistent zu halten
  8. Transparent und logisch aufgebaute Formulare (Schrittweise Navigation bei komplexeren Abfragen)
  9. Gute visuelle Struktur - Aufteilung in Primäre und Sekundäre Aktionsbereiche
  1. Naviagtionsdesign fördert die Vertrauenswürdigkeit einer Website
Navigationsdesign heißt, die Seiten einer Website so zu verlinken, dass die Seiten in sinvollen Beziehungen zueinander stehen.
  1. Wichtigkeit und Relevanz
  2. Thematische Bedeutung
Menschen bevorzugen Informationen in Abfolgen. Zusätztlich haben sich feste Bedienparadigmen im Internet etabliert - es wäre schade diese nicht zu bedienen.
  1. Orientierung
  2. Ausgewogenheit
Eine gute Webnavigation bedingt nicht nur, ob der Benutzer die gesuchten Informationen schnell finden, sondern auch, wie sie diese Informationen erleben.
  1. User Excitement/ Bedienerlebnis
  2. Branding/Design
In der Summe beeinflussen sämtliche Punkte den Grad der Vertrauenswürdigkeit einer Website.
  1. Web 2.0 Techniken im Überblick:
  1. Standardisierter Seitenaufbau durch Seitenprototypen und Schema
  2. Höchste Qualität in der Anwendung von Webtypographie und Farbgestaltung
  3. Neuartige Grafikeffekte durch die Verwendung von Alpha-Bitmaps (png)
  4. Dynamic Image und Rich-Media Replacement
  5. Fluide Elemente/ Switch-Layouts bzw. Chamäleons
  6. Verwendung von standardisierten Protokollen (XML, RSS, Soap)
  7. Standardisierte Datenschnittstellen für öffentliche Dienste (API)
  8. Techniken, die das Prinzip "user generated" bedienen (Tag-cloud)
  9. Techniken, die das "user excitement" erhöhen (Video, Podcast)
  10. Informationsangebote mit Hilfe von asynchroner Datenübertragung (Ajax)
  11. Angebot von Metacontent und Tagging
  12. Programmierung der Funktionalität mit Hilfe von Skriptsprachen
  13. Einbau von RSS-Feeds und "Externen Content"
  1. Website-Know-how bei eCommerce
  1. Individuelle Anpassung der Angebote durch einen "Navigation Predictor"
  2. Möglichkeit bieten eine Beurteilung zu schreiben "Customer Interaction Broker"
  3. Personalisierte erste Seite für Anzeigenbesucher "Landing Page Optimizer"
  4. Suchfunktion, die auf Basis bisheriger Käufe die komerziell relevantesten Ergebnisse präsentiert "Social Search"
  5. Suchfunktion, die unscharfe Suchergnisse mit Hilfe der Suchmuster anderer Benutzer korrigiert "Collaborative Searcher"
  6. Wirtschafliche Entscheidung auf Grundlage kollektiver Intelligenz treffen "Collective Intelligent"
  7. Nur so wenig Benutzerdaten sammeln, wie für eine Bestellung unbedingt notwendig sind "Data Austerity"

Fazit: Eine gute Benutzerfreundlichkeit ist wichtige Voraussetzung für Glaubwürdigkeit, Autorität und Vertrauen.

Weiter führende Links
  1. audio.visuelle.kommunikation
  2. application.flash.web.design
  1. clic.lab³ - unser Web-Content-Management-System
  2. clic.live! - Sie legen Ihre Daten auf den Webspace - Alles andere erledigt clic.live!
  3. Darauf können Sie sich verlassen.
  4. Referenzen und Projektbeschreibungen
Seite druckenNach Oben

Claudio Schneider
0721 78 80 863
XINGVCARD

Herr Schneider freut sich auf Ihre Anfrage im Bereich interaktiver Medien und Oberflächen, Website, Usability & Co, Suchmaschinen und Full-Service-Lösungen.

Wir liefern, was Sie suchen:

Interaktive Produktkataloge
Lernsysteme (Web/CD)
Desktop-Anwendungen
Drag and Drop Widgets
XML-basierte Anwendungen
"Out of Browser"-Anwendungen
Spezialgebiete:
Flash™, AIR™, Silverlight™
Flex™-basierte RIAs, MPEG-Video, Flash™-basierte Spiele
AJAX, PHP-basierte Web-Lösungen
Beispiele finden Sie hier ...

Cliclab³ - Ready Steady - Web!TYPO3 projectJoomla!wordpress.orgdrupalGnash is a GNU Flash movie player...Flex