Lisao0's Weblog

Web Usability

lisao0 — Fri, 04 Dec 2009 16:53:19 +0000

MAN SIEHT JA WIE GUT WORDPRESS BEI MIR FUNKTIONIERT!!!
ICH WERDE ES UMGEHEND ÄNDERN SOBALD ES MIR MÖGLICH IST!!!

Was heißt Usability?

Usability = Benutzerfreundlichkeit

Was ist Usability?

Vor 10 Jahren war das Internet noch aufregend. Egal wie lange das Laden einer Website dauerte oder wie schlecht designed waren, war es trotzdem ein Highlight. Heute ist das Internet Routine, ein Tool; jeder Fehler würde schlecht für das Geschäft sein. Wenn es bequem ist, wird es genützt, doch wenn nicht, wird es nicht angerührt.
Eine gute Usability soll Anwender dazu bringen, sein Ziel schnell und richtig zu erreichen.

Qualitätsmerkmale:

Wie einfach ist es zu benutzen?

Wie schnell kann man die Nutzung erlernen?

Welchen Schwierigkeitsgrad hat die Nutzung?

Wie leicht kann man sich die Bedienung merken?

Wie hoch ist die Fehleranfälligkeit

Durch das Internet entsteht ein verschärfter Wettbewerb zwischen den Unternehmen. Heute werden verschiedenste Seiten über Suchmaschinen gesucht und das in nur wenigen Sekunden! Man sollte auf einer Website due Abläufe so einfach gestalten, dass an leicht damit umgehen kann und dadurch auch keine Zeit verloren geht.

Die Toleranz der Nutzer sinkt gegenüber schlechtem Design.

Erwartungskonformität

Bei gewissen Anwendungen wie z.B. bei Microsoft Programmen erwartet sich der Anwender gewisse Dinge. Man erwartet beispielsweise, dass man ein Programm durch das Klicken auf das kleine X, dass sich oben links in der Ecke befindet, schließen kann. Sollte es sein, dass ein Programm anders zu schließen ist, würde sich der Anwender nicht mehr auskennen und das Programm nicht mehr als gut werten.

„Buxton’s Law“

Schlechte Usability:

Online-Verkaufe, Dienste…

Grundsätze:

Messung der Usability Teil 1: ist Abhängig von der Anwendung

· Experten-orientierte Methode

· Nutzerzentrierte Methode

Kombinierte Verfahren aus beiden Methoden

Messung der Usability Teil 2:

· Nutzergruppe festlegen· Benutzerkriterien

· Aufgabenzenarien festlegen, die von Nutzern bearbeitet werden

·

Video, Ton usw. festlegen

Auswirkungen für das Webdesign

· „Don’t make me think-Gesetz“· Darbietungen menschlicher Aufnahmefähigkeiten anpassen

· Nutzer wollen alles sofort und automatisch finden können

· Zu viele Infos sind schlecht und unübersichtlich

· Modell der „magischen 7″ -> Erinnerungsleistung
- Abweichungen möglich
- Die Erinnerung beim Surfen reicht ca. 4-5 Bildschirmseiten zurück

· Infos sind leichter zu verarbeiten und zu merken, wenn bekannte Strukturen vorhanden sind

· Kundenbedürfnisse erfüllen
- Wo bin ich?
- Was tut/kann diese Seite?
- Wo bin ich gewesen?
- kurze Ladezeit

· Einfache Bedienung
- festes Layout
- intuitive und logische Bedienung ermöglichen

· Aufmerksamkeit
- „Eye Catcher“: intensive Farben, starke Kontraste, scharfe Konturen aber nicht zu viel. Sparsam und sinnvoll einsetzen!

· Konvention
- gestalterische Konventionen einhalten, wie z.B. Leserichtung

· Lesestile
- „Scannen“ -> hervorstechendste Stellen
- „Skimmen“ -> konkrete Suchbegriffe
- Kontrast zwischen Hintergrund und Text d.h. Hintergründe sollten nicht ablenken, Text soll nicht blinken

· Navigation
- schnell & nachvollziehbar wie Breadcrumbs und wenig verschachtelter Aufbau

Gute Beispiele für Usability:

· I-Phone: ungewohnte Technik aber logische Funktionen, intuitive Funktion d.h. kein Gebrauch einer Bedienungsanleitung

Schlechte Beispiele für Usability:

· Programme „schwimmen“ am Desktop· Zu viele Infos auf einmal, nicht strukturiert

· Navigation: z.B. Bilderfilm: man bekommt dann erst Infos, was hinter diesen Bild zu finden ist, wenn man mit der Maus auf ein Symbol fährt

Blickverläufe
Blickpfade:

· Gestaltwahrnehmung während der Fixationsperioden
- Sakkaden (ich denke nicht daran, WIE ich ein Bild ansehe – es ist ein automatisches Bilderanschauen)
- Fixation (Dauert 0,2 – 0,6 Sekunden)

· Für Werbung und Homepage:
- Sakkaden sind vom Interesse abhängig
- Erfassung von Regressionssakkaden (= Verständlichkeit der Texte)

· Aktivierung
- Zusammenhang zwischen Erregungsniveau oder Aktivierung & Leistungsfähigkeit (Lernen)

· Messverfahren:
- Hautwiderstand
- Pupillendilation
- Hauttemperatur

Web-Usability-Analyse

1. Kurzdarbietung:
ein Bild wird ca. 4-5 Sekunden angeschaut und dann muss man berichten, was einem in Erinnerung geblieben ist. Hierbei wird beobachtet, worauf sich der Tester als erstes bzw. am längsten konzentriert.

2. Aufgabenerfüllung:
Zuerst wird dem Tester eine Aufgabe gestellt (z.B. dass man ein T-Shirt kaufen soll). Vorerst wird ein Gespräch geführt, damit der Tester Bescheid weiß, was er suchen soll.
Beim Suchen wird beobachtet, wie der Blickverlauf ist und wie sein Gedankengang verläuft. Dazu muss man während des Suchens Kommentare abgeben, wie übersichtlich die Homepage ist und wie schwer es einem fällt, die gestellte Aufgabe zu finden.
Für das Messkonzept für die Usability- Analyse wird danach ein persönliches Interview geführt, wobei man Homepagefehler, Orientierungsprobleme, Verbesserungsvorschläge, fehlende Auskünfte und Informationen, persönliche Änderungswünsche und mögliche Statements preisgeben soll.

gimp

lisao0 — Fri, 04 Dec 2009 16:34:06 +0000

gimp.org

ist eine Organisation, die die verschiedensten Programme und Funktionen von Adobe Photoshop nachmacht

gimp kann die normale psd-Datei von Adobe Photoshop öffnen, d.h. ich brauche das Bild nicht als eine jpg-Datei speichern

(das Programm kann man gratis downloaden)

Fragen zum Trainingsvideo „Auswahlwerkzeuge“ und zu Photoshop-Grundlagen

lisao0 — Fri, 04 Dec 2009 16:18:44 +0000

Wie groß ist das Bild „duck.jpg“ in cm und in Pixel und welche Auflösung hat es?
16 KB, Breite 470 Pixel, Höhe 380 Pixel, Horizontale Auflösung 72 dpi, Vertikale Auflösung 72 dpi
dpi = Pixel pro Zoll

Was muss ich machen, wenn ich das Bild in einer Zeitschrift drucken will?
Ich muss das Bild als jpeg-Datei abspeichern und für einen Ausdruck auf 300 dpi erhöhen. (72 dpi wird für einen Bildschirm benötigt)

Was ist der Unterschied, wenn ich die Auflösung auf 200dpi erhöhe und einmal das Kästchen „Bild neu berechnen mit“ angehakt habe und einmal nicht?
Wenn ich das Kästchen nicht anhkreuze, bleibt die Anzahl der Pixel gleich. Wenn ich es angehakt habe, kann ich die Höhe und die Breite verstellen und die Pixel werden hochgerechnet.

Ein Bild hat viele Punkte in Breite und Höhe. Multipliziert man diese, bekommt man die Pixel.
Bsp.: 5 dpi Breite, 8 dpi in der Höhe, d.h. das Bild besteht aus 40 Bildpunkten und somit aus 5×8 dpi. Wenn ich das Bild ausdrucken würde, würde ich das 4fache an Bildpunkten benötigen. Je mehr, desto besser und dichter!
Wenn ich ein Bild mit der doppelten dpi-Zahl ausdrucken möchte, nimmt er die vorhandenen Bildpunkte und rechnet die fehlenden Bildpunkte rechnet er rein, d.h. er „bläst“ das Bild auf.
Der PC sollte keine Pixel hinein rechnen, da das Bild „krieselig“ aussieht. Je weniger dpi ich habe desto weniger Bildpunkte habe ich pro cm!
Der Drucker druckt ca. 300 dpi (wenn die dpi‘s größer werden, werden die Bildpunkte kleiner & wenn die dpi’s kleiner werden, werden die Bildpunkte größer.)

Welche unterschiedlichen Auswahlwerkzeuge werden in dem Trainingsvideo verwendet?
geometrische Auswahlwerkzeuge

Wie kann eine getätigte Auswahl aufgehoben werden?
Mit der Tastenkombination Strg+d

Wie kann man einer bereits gemachten Auswahl einen neuen Auswahlbereich hinzufügen bzw. ihn von der bereits vorhandenen Auswahl abziehen?
Wenn ich eine Auswahl abziehe, dann ist diese verschwunden.
Mit Hilfe des Maskierungsbereiches kann ich mit dem weißen Pinsel hinzufügen und mit dem schwarzen Pinsel eine bereits vorhandene Auswahl reduzieren.
Dies kann man auch in der Optionsleiste auswählen.

Wann sollte man bei einer Auswahl „weiche“ Kanten verwenden?
Durch die Option „weiche Kanten“ kann man die Kanten der Bilder weicher darstellen.

Wie kann eine Auswahl verschoben werden?
Eine Auswahl kann mit der Leertaste oder mit der Maus verschoben werden.
Wenn man das Auswahl-Werkzeug aktiviert hat, dann kann man nur das Ausgewählte verschieben. Doch wenn ich das Verschieben-Werkzeug genommen habe, wird auch der Inhalt mitverschoben.

Was ist der Unterschied zwischen dem Lasso, dem Polygon-Lasso und dem magnetischen Lasso?
Mit dem Lasso habe ich eine freie Auswahl.
Mit dem Polygon-Lasso kann ich gerade Linien zeichnen.
Das magische Lasso hat die Eigenschaft, dass es die Konturen des Bildes erkennt, d.h. im Grunde genommen kann ich ziemlich ungenau auswählen, doch das magische Lasso „verbessert“ mir diese sehr genau.

Wie funktioniert das Auswahlwerkzeug Zauberstab und was bedeutet dabei die Toleranz?
Den Zauberstab verwende ich, wenn ich nach der Farbe auswähle. Die Toleranz sagt mir dabei, wie genau ich die Farbe treffen muss, d.h. wenn ich eine hohe Toleranz habe, dann habe ich automatisch eine höhere Auswahl; doch wenn ich eine niedrige Toleranz habe, habe ich auch eine niedrige Auswahl.

Wie funktioniert das Auswahlwerkzeug „Schnellauswahl“ und wann ist es besonders gut geeignet?
Das Schnellauswahl-Werkzeug ist eine Weiterentwicklung des Magischen Auswahlpinsels. Es funktioniert hervorragend, wenn die Kontraste eines Objekts zu seiner Umgebung gut genug sind – es wählt dann Objekte fast automatisch aus.

Wiederholung Auswahlwerkzeuge

lisao0 — Sat, 28 Nov 2009 14:17:08 +0000

Wozu brauchen wir sie?
Damit wir einen Bereich eines Bildes markieren, verschieben, bearbeiten können. Auswahlwerkzeuge sind auch dazu da, einen Bereich zu begrenzen.

Auswahl-Werkzeuge:
nach Form: Rechteck, Kreis, Einzelne Zeile, Einzelne Spalte
freie Auswahl: Lasso
nach Farbe: Zauberstab

*Verschieben-Werkzeug um das ganze Bild zu verschieben.

*Strg+d = Auswahl aufheben

*Wenn ich die Leertaste angedrückt halte, kann ich die Auswahl, die ich gerade ausführe, verschieben.

*Ellipse: hier kann ich auch wieder mit der gedrückten Leertaste jede Ecke oder Kurve ganz genau auswählen.

*Mit der Alt-Taste kopiere ich in Adobe Photoshop.

*Wenn ich die Shift-Taste gedrückt halte und den Zauberstab+ auswähle, kann ich kleine Teile meines Bildes dazu auswählen, um die Auswahl ganz genau zu machen.

*Mit Alt-Taste & - bekomme Zauberstab-, d.h. ich kann einen Bereich, den ich zu viel ausgewählt habe, wieder weniger machen.

*Mit der Kombination einer Rechteckauswahl und des Zauberstabwerkzeuges -, kann ich beispielsweise eine Seerose genau und problemlos auswählen.Mit dem normalen Lasso-Werkzeug kann man frei zeichnen.

*Mit dem Polygon-Lasso kann ich gerade Linien zeichnen.

*Das magische Lasso erkennt die Konturen des Bildes, d.h. ich brauche keine genaue Linie fahren, mit dem magische Lasso geht es besser, genauer und schneller.

*Doch wenn ich hinaus zeichne kann ich diese falschen Ankerpunkte mit Hilfe der Lösch-Taste problemlos korrigieren, es sieht aus, als wäre man einfach einen Schritt zurückgegangen.

*Wenn man sehr genau ist und sämtliche kleine Eckchen, die noch nicht genau ausgewählt sind, noch ausbessern möchte, kann man dies mit dem Maskierungsmodus machen. Hier kann man mit weiß ausmalen und hinzufügen und eventuell mit schwarz noch einmal etwas verschwinden lassen.

Auswahlwerkzeuge

lisao0 — Thu, 29 Oct 2009 15:33:53 +0000

Heute haben wir mit Hilfe eines Videos, das uns die Grundlagen für solche Veränderungen zeigt, versucht dieses Enten-Bild schön zu gestalten.
Hierbei lernten wir verschiedenste Werkzeuge kennen und beherrschen.

vorher

nachher

Viele Kristas mit Adobe Photoshop

lisao0 — Mon, 19 Oct 2009 07:07:48 +0000

Schritte:

Alle Bilder in eine Ebene -> Datei -> Skripten -> Dateien in Stapel laden
alle Ebenen markieren -> Bearbeiten -> Ebenen automatisch ausrichten -> um die Ebenen deckungsgleich zu machen, wie Tische, Sesseln oder die Tafel.
Jetzt alle Ebenen, außer den festgelegten Hintergrund & die 1. Ebene ausblenden (Aug-Symbol)
dann Ebenenmaske hinzufügen und weißes Kasterl anklicken -> schwarze Farbe
dann untere Ebene ausblenden -> gewollten Teil des Bildes „ausschneiden“, indem man mit den Pinsel drüber malt
mit Strg+i dreht man in der Maske die schwarze und weiße Farbe um, d.h. das „Ausgeschnittene“ ist jetzt im festgelegten Hintergrundbild sichtbar.
schwarz verbirgt, weiß bleibt!
Wenn man z.B. ein Eck übersehen hat, kann man das wieder mit umgedrehten Farben (siehe Bild) ausbessern.
und nicht zu vergessen sollte man vor dem Fertigstellen noch die 6-Schritte-Methode anwenden!

Mein Krista-Bild

Schminken mit Adobe Photoshop

lisao0 — Thu, 15 Oct 2009 14:18:45 +0000

vorher

nachher

sehenswert: http://www.youtube.com/watch?v=GrwgMer9-_U&NR=1&feature=fvwp

Bildebenen

lisao0 — Thu, 08 Oct 2009 08:18:04 +0000

Es gibt verschiedene Ebenen wie z.B.: die Hintergrundebene, die Zeichnungs- und Schriftebenen die man sich wie aufeinandergelegte Overheadfolien vorstellen kann (z.B. Bild liegt unter Text).

Symbole:
Papierkübel: zum Wegschmeißen einer Ebene
Neue Ebene: zur Erstellung von neuen Ebenen
Ordner: Ebenen in Ordnern erstellen
Kreis: für neue Einstellungsebenen
Maske: Maske hinzufügen
fx: Ebenenstil hinzufügen
Kette: zum Verbinden der Ebenen
Auge: zum Ein- und Ausblenden von Ebenen

* Wenn ich auf einer Ebene arbeiten will, muss ich diese auch (am rechten Rand) anklicken und somit auswählen.

* Zum Verschieben einer oberen Ebene, kann ich mein Bild einfach nehmen und verschieben.

* Ich lösche eine Ebene, indem ich das Bild per links-gehaltenen Maustaste zum Papierkübel-Symbol führe.

* Wenn ich etwas auf ein Bild malen will, kann man die Kantenhärte (hart oder weich) meines Pinsels einstellen.

Wenn ich auf der 2. (kopierten) Ebene (die über der 1. Ebene liegt) ein kleinen Bildteil der 1. Ebene sehen will, kann ich mit Hilfe des Radiergummis, den ich aus der Toolleiste nehme, eine (jetzt noch s/w-) Blüte der 1. Ebene in Farbe „herausschneiden“.

-
duplizieren = kopieren
-

Wie komme ich zu einem schwarz/weißen Bild?
Zu einem s/w Bild komme ich, indem ich die Sättigung verringe, das heißt -100 = 0 Sättigung, und das heißt wiederum s/w.

ö -> Pinsel/Radierer verkleinern
# -> Pinsel/Radierer vergrößern

Maske:
Ich nehme den Pinsel, wähle die Farbe schwarz und male auf meiner Maske (auf den Bild sehe ich es dann wieder farbig herausscheinen)
Wenn ich mit weiß male (und eine harte Pinselhärte nehme) kann ich dort, wo ich schwarz hinausgemalt habe, mit dem Weiß korrigieren.
(andere Variante: http://www.video2brain.com/de/videos-35359.htm)

Eine kleine Probeübung:

Bilderoptimierung

lisao0 — Thu, 08 Oct 2009 07:51:00 +0000

In Adobe Photoshop gibt es 3 Hauptbereiche:

1. Arbeitsfläche + Infoleiste
2. Toolbox + Optionsleiste (oben) wenn ich bei der Toolbox etwas auswählen, ändern sich die Optionen für jedes einzelne Werkzeug
3. Paletten (rechts) – kann man nach persönlichen Belieben gestalten; bestehen meistens aus meheren Reihen (Ebenen, Kanäle, Pfade)

Die 6 Schritte-Methode:

1. Qualität für den Verwendungszweck prüfen (Auflösung, Größe)

2. Zuschneiden des Bildes (ich schneide den Teil heraus, den ich brauche)

3. Anpassen auf Kontrast und Tonwert über Einstellungsebenen (betrifft das ganze Bild)

4. Farbstiche entfernen (Rotstich, Blaustich / betrifft das ganze Bild)

5. Farben und Tonwerte für einzelne, bestimmte Bildbereiche korrigieren

6. Bei Bedarf nachschärfen (mit Scharfzeichnungsfilter)

(7. im richtigen Format speichern, z.B.: in jpg, wenn ich das Bild ohne das Adobe Photoshop Programm öffnen möchte.)

Die Tonwertkorrektur braucht man, wenn man die Helligkeit eines Bildes verändern will.

Die Farbbalance benötigt man, um die Farbwerte zu korrigieren.

Mit dem Schwammwerkzeug kann man die Intensivität erhöhen oder verringern.

Mit dem Abwendlerwerkzeug kann man einen beliebigen Bildbereich heller machen.

Mit dem Nachbelichterwerkzeug kann man Bildbereiche abdunkeln.

! Damit man das Originalbild nicht verändern kann, ist die Hintergrundebene gesperrt !

Adobe Photoshop

lisao0 — Thu, 24 Sep 2009 11:57:49 +0000

Adobe Photoshop ist ein Programm, mit dem man Fotos überarbeiten kann.

Das klassische, freiverfügbare Programm zum Bearbeiten heißt gimp, das man auch kostenlos unter www.gimp.org herunterladen kann.

Widgets = Zusatztools zum installieren

Adobe Device Central
hier kann man Inhalte wie Benutzeroberflächen, Anwendungen, Applikationen und Videos für Handys entwickeln.

Adobe Dreamweaver
hier kann man Websites und Anwendungen entwerfen, entwickeln und verwalten.

Adobe Photoshop
hier kann man Bilder bearbeiten, die dank der beispiellosen Flexibilität bei der digitalen Bilderbearbeitung eindrucksvoller den je werden.

Acrobat Distiller
ermöglicht die Server-basierte Konvertierung (http://de.wikipedia.org/wiki/Konvertierung_(Informatik)) von PostScript-Dateien in das Adobe pdf-Format.
Hierbei hat man einige Vorteile erzielt:
         ◊ Erstellung zuverlässiger und kompakter Ausgabedateien
         ◊ Einfache Integration von Adobe pdf-Dateien in Dokumenten-Workflows
         ◊ Technologien und Standards des Adobe pdf-Formats

Adobe Premiere Pro
für Aufnahme und Bearbeitung von Videos für die Ausgabe im Web, auf DVD oder auf mobilen Endgeräten.

Adobe Stock Photos
hier kann ich über eine riesige Foto-Datenbank Fotos kaufen und herunterladen.

Adobe Bridge
hier ist eine visuelle Datenverwaltung möglich.
(Ermöglicht als zentrales Programm den Zugriff auf sämtliche Projektdateien, Anwendungen und Einstellungen. Zudem enthält das Programm eine Funktion zur Verwaltung und zum Austausch von Dateien. Mittels Adobes eigener Bilddatenbank – Adobe Stock Photos – können direkt aus der Anwendung Nutzungslizenzen von hochauflösendem Bildmaterial erworben werden.)

Adobe Soundbooth
hier kann ich Audiodateien einfach erstellen und bearbeiten.

Adobe Acrobat 8 Professional
hier kann man zuverlässig Adobe pdf-Dokumente erstellen, zusammenführen und kontrollieren und anschließend auch auf einfache und sichere Weise abstimmen und zur Datenverfassung nuzten. Dieses Programm dient auch zum zuverlässigen Austausch professioneller Dokumente.

Adobe ExtendScript Toolkit 2
Mit diesen Programm kann man JavaScripts erstellen, bearbeiten und debuggen, die dann für Scripting Adobe-Anwendungen verwendet werden.

Adobe Extension Manager
Dieses Programm dient zum Hinzufügen und Verwalten von Erweiterungen in Dreamweaver, Fireworks und Flash. Die Erweiterungen dieser Produkte sind zusätzliche Hilfsprogramme, wie die neuen Features.

Adobe Flash Professional
hier kann man visuell ansprechende und interaktive Inhalte entwickeln. Dieses Programm bietet leistungsstarke Werkzeuge für Animation und Zusammenarbeit sowie für die Bereitstellung auf verschiedensten Geräten und Plattformen.

Adobe Flash CS3 Video Encoder
hier kann am multimediale Inhalte der Flash-Filme erstellen. Die resultierenden Dateien liegen im swf-Format vor, einem auf Vektorgrafiken u.a. basierenden Grafik. und Animationsformat. (Das Kürzel SWF steht dabei für Shockwave Flash.)

Adobe LiveCycle Designer 8.0
Dieses Programm bietet robuste und intuitive Wekzeuge zum Erstellen von interaktiven Formularen und personalisierter Dokumente.

Verschiedenste Dateiformate:

jpg -> ist das häufigste Bildformat
Das meist verwendete Dateiformat bei Digitalkameras ist heute das jpg-Format. Der große Vorteil von jpg-Dateien ist die Möglichkeit der Komprimierung, diese ist jedoch mehr oder weniger stark verlustbehaftet. Weiters spart das jpg-Format viel an Platz.
(http://de.wikipedia.org/wiki/JPEG)

raw -> unkomprimiert, ist besser zum weiter bearbeiten, ist ein unentwickeltes Format, eine raw-Datei bleibt immer im Original-Aufnahmezustand gespeichert
(http://www.heinzhanka.com/tips_raw_dateien.html)

psd -> eigene Photoshop-Datei, um einiges größer als die normale jpg-Datei, beim Speichern werden sämtliche verwendeten Bilddateien verlustfrei gespeichert
Wenn ich in eine psd-Bild-Datei einen Text hineingeschrieben und ich es als jpg abgespeichert hätte, könnte ich die Texte nicht mehr herauslöschen! Die Bild-Datei muss hier als psd-Datei abgespeichert werden, um spätere Änderungen vollziehen zu können!
(http://grafikformate.christian-michael-schmidt.de/formate/raster/psd.htm)