Invalide Inputs in Angular speichern

Um einen invaliden Input trotzdem aus dem View in Model zu bewegen, braucht dieses Input eine extra Direktive allowInvalid.

Zum Beispiel so:

 

weiter lesen

Betriebsystem Android 5.1, Screenshots 2016

Aktuelle Screenshots

amazon-push-button
Amazon push-button

und so sollen sie auch aussehen. Ohne Rahmen, ohne Pfeilen. Nur die Screenshots – Bildschirmbilder. Nichts mehr.

weiter lesen

Details. Bild und Überschrift auf der Startseite von Dr. Web

Heute nehmen ich die Startseite von drweb.de – einem Webmagazin für Webdesign als Beispiel und verbessere ein Detail auf der Seite. Schauen wir uns an in welchem Verhältnis Bilder und Überschriften stehen.

Kinder lieben Bücher mit Illustrationen, eine Seite ohne Bilder ist für sie langweilig. Das gleiche gilt auch für Erwachsene, anders zu denken wäre naiv. Erwachsene suchen Illustrationen in Zeitschriften, schauen Werbebanner an und finden Katzenbilder süß. Alle mögen Bilder.

Ein Bild fühlt sich am besten, wenn es ganz oben in der Hierarchie des Textblocks stehtdetails-illustration

Ein Bild hinter dem Überschrift trennt Text vom Überschrift und unterbricht das Lesen. Dabei wird die Illustration schneller bemerkt als Text und der Leser wird gezwungen mit seinem Blick vom Bild zur Überschrift und dann zum Text hoch und runter zu springen.

Daher mein Vorschlag das Bild über den Überschrift zu stellen:drweb-details

Spüren sie die Änderungen? Das scannen der Webseite ist jetzt leichter.

weiter lesen

Neue Website für Wall Street Journal

Zeitung Wall Street Journal hat seine Website erneuert. Das ist der erste große Redesign seit 2008. Wsj.com hat ein luftiges und responsives Design bekommen.

5f3aa16a83c9ff2884e0

Am besten finde ich die Umsetzung der Aktienkurse. Sie werden jetzt oben auf der Seite angezeigt. Dazu lässt sich die obere Leiste vergrößern und Details zur Aktienkursen anschauen.

Eine gute Idee. Die Information wird schnell und verständlich kommuniziert.

18386aa6c5bf50bd5583

Die Entwickler haben auch eine Geschichte vorbereitet: Was gibt es neues auf wsj.com?

weiter lesen

Paper cut bug

Ich begeistere mich immer wieder, wie im Englischem mit den Wörtern umgegangen wird und was für schöne Wortgebilde dabei entstehen:

iOS 8 fixed the crashing, but introduced thousands of little paper cut like bugs.
– Rusty Rants

Es gibt also Fehler, die so weh tun, wie eine Papierschnittwunde. Papierschnittwunden sind klein, aber trotzdem schmerzhaft. So auch mit den Fehlern in der Software, sie tut den Menschen weh. Eine interessante Gedanke.

Liest auch den ganzen Artikel: „It Just Works„.

weiter lesen

Flugzeugmodus nutzen

20140801-123139-45099129.jpg

Oft gibt es Situationen, wo wir konzentriert sein sollen. Zum Beispiel raten Professoren das Handy während der Klausur auszuschalten. Doch aus- und einschalten dauert, bei einem Neustart Verbraucht das Gerät unnötig Energie. Einfach nur lautlos zu stellen, ist Schwachsinn, die Vibrationen stören trotzdem. Vielleicht war es wichtige Nachricht? Und schon ist die Konzentration weg.

Um konzentriert zu arbeiten genügt ein Flugzeugmodus.

weiter lesen

Telefonnummer richtig schreiben

Webseiten werden immer noch als ein Link zum analogen Welt benutzt. Dabei helfen Telefonnummer unheimlich viel Menschen aus dem Internet ins lokale Geschäft zu holen. Alle wissen, wie Telefon funktioniert. Deshalb ist es wichtig das Telefonnummer verständlich und sichtbar auf der Webseite hinzuschreiben.

Zum Beispiel so:

Telefon: +49 163 63 65815

Nummer soll einfach abzutippen sein.

Von überall zugänglich, also eine internationale Schreibweise verwenden.
Natürlich soll Nummer auf dem iPhone anklickbar sein. Keine mathematischen Formeln, deshalb möglichst wenige Ziffern schreiben. Keine Klammern, oder sonstigen Sonderzeichen.

Bei Telefonnummern gilt, wie auch bei den anderen Texten im Internet: möglichst einfach sein.

weiter lesen

Yandex.Browser – Browserkrieg, wo Interface eine Waffe ist

Wir haben einen Gewinner im Krieg um den besten Internet Browser. Es ist Chrome. Genauer genommen – das Chromium. Unter diesem Namen stellt Google der Großteil des Quelltextes von Google Chrome zu Verfügung.

Browser Logos von Paul Irish

Browser Logos von Paul Irish

So machen sich viele Entwickler an die Arbeit, eigene Browser zu bauen. Sie wissen schon, alle wollen meine Daten sammeln, oder gibt es andere Gründe warum Firmen eigene Versionen des Chromiums veröffentlichen?

Es stellt sich die Frage: Wie gewinne ich Nutzer für ein Produkt, der auch bei Anderen genauso gut läuft? Die Antwort ist: ich verpacke es schöner. Die Verpackung eines Internetbrowsers ist das Interface. Schöner, bequemer und einfacher soll es sein. Vor allem einfacher.

Yandex.Browser – ist so ein in einfachere Oberfläche verpacktes Chromium. Er hat Vorteile von Google Chrome und ein intuitives Interface von Yandex.

Seit ein paar Tagen nutze ich ihn als mein Standartbrowser. Was mir im Yandex.Browser besonders gefällt, ist die Integration von Lesezeichen und häufig besuchten Webseiten in die Suchleiste. Es nennt sich Tablo:

Yandex Browser

Suchleiste und Lesezeichen vereint.

Browserkrieg aus den Jahren 1995-1998 scheint sich auf dem Interface Gebiet neu anzuzünden. Yandex.Browser ist ein guter Soldat.

weiter lesen

Über das Bildschirmhintergrund.

Ich verstehen den Sinn von Bildschirmhintergründen nicht, denn ich bekommen sie nur selten vor die Augen. Ist das Hintergrundbild zu sehen, wird dein Bildschirm nicht optimal ausgenutzt. Ich werde lieber das Fenster großziehen, um damit zu arbeiten, um den Platz sinnvoll auszunutzen.

Im Englischen wird der nützliche Platz auf dem Bildschirm „screen real estate“ – „Bildschirm Immobilien“ genannt. Genau, weil dieser Platz so wertvoll ist.

Hier ist mein Bildschirm mit allen Programmen, die ich immer brauche:

Macos-mission-control-mit-holz-hintergrund

weiter lesen

DB Navigator für Windows Phone. Teil 1: Hauptbildschirm

Eine der Apps, die ich jeden Tag nutze ist DB Navigator von Deutsche Bahn. Extrem nützlich und genauso extrem hässlich. Also versuche ich sie besser zu machen. So sieht es jetzt:

1 2 3
DB Navigator in der Version 1.2.16.68

 

Das App plant für mich Reisen innerhalb Deutschland. Egal, ob man mit Bus, Bahn, Straßenbahn, oder U-Bahn unterwegs ist, das  App zeigt Verbindungen, Abreisezeiten, Verspätungen und vieles mehr.

Erste Entwürfe. 

DB-Navigator-Hauptseite-Entwurf

Hauptbildschirm.

db-navigator-sauberes-hauptbildschirm

weiter lesen

Digitale Menschen brauchen digitale Benutzeroberflächen

UI022

Ich mag das Konzept von Metro UI, es hat ein bedeutender Trend erwischt: Menschen haben keine Angst mehr digital zu sein. Früher war es für viele Benutzeroberflächen typisch, sich an die bekannten Konzepte aus der analogen Welt zu stützen. Wir haben auf dem Bildschirm Objekte aus der realen Welt nachgebaut – nur so war es möglich, ihre Funktionen zu erklären.

Menschen haben eine Schaltfläche mit Texturen und Schatten gesehen und Ihnen war klar, sie können es drücken. Menschen sahen einen Korb und es war verständlich, in diesen Korb kommen nicht mehr gebrauchte Dokumente.

Jetzt ist der Punkt, wann wir die künstliche Verbindung zu realer Welt brechen können und nur noch digitale Benutzeroberflächen gestalten. Kindern lernen der Umgang mit Computern wohl schneller, als die Ihr erstes Blattpapier in einen Korb werfen.

weiter lesen

Dokumentarfilme über Design, Typografie und Urbanität

Meine Sammlung guter Dokumentarfilme.

Helvetica. helveticafilm.com
Ein Film über Typografie und Design. Alles dreht sich um Buchstaben, Schriftarten, besonders um die Helvetica Schriftart.



Objectified. objectifiedfilm.com
Ein Film über das Design von Dingen, die wir jeden tag nutzen.



Urbanized. urbanizedfilm.com
Ein Film über das Design von Städten. Über die Fehler in der Planung und was uns diese Fehler jeden Tag kosten.

weiter lesen

Lesenswertes für Wochenende

  1. Gute Überlegungen zu den Prinzipien in der Arbeit von Steve Jobs und Jonathan Ive. Wie soll das Model der Zusammenarbeit „Designer – CEO“ aussehen?
    http://www.dubberly.com/articles/stevejobs.html

  2. Antoine Lefeuvre schreibt über die Übersetzungen in der UX. Er zeigt sowohl als gelunge Beispiele, als auch nicht.
    http://www.alistapart.com/articles/translation-is-ux/

  3. Instagram – Die Erfolgsgeschichte. In einem Jahr auf Wert von $1 Milliarde.
    http://techcrunch.com/2012/04/09/instagram-story-facebook-acquisition/
weiter lesen

Warum man „Was läuft?“ statt „Alles klar bei dir?“ fragen soll.

Auf die Frage „Alles klär bei dir?“ antworte ich mit einfachem „Ja“, und es ist genug. Je weniger die Konversation dauert desto besser.
Diese Frage stellt sich als eine negative Frage dar. Denn, wenn wir gefragt werden, ob bei uns alles in Ordnung ist, erinnern wir uns automatisch auch auf die Dinge, die nicht in Ordnung sind. Wir rufen in unserem Kopf die „klare“ Dinge, doch sehr viele Sachen und Probleme sind uns nicht klar. Wenn ein Problem, mir hundert Prozent verständlich erscheint, werde ich es sofort lösen.

Eine bessere Methode, das Gespräch mit einem Menschen anzufangen, ist es ihn auf die positive Dinge im Leben aufmerksam zu machen. Ihn zu fragen, „was läuft?“
Diese Frage kann nicht mit einem „Ja“, oder „Gut“ beantwortet werden. Menschen sind gezwungen sich die Sachen aus dem Kopf zu holen, die sie gerade bewegen. Sachen, die gerade laufen. Darauf kann angeknüpft werden.

Ein guter Gesprächsanfang ist ein tolles Anzeichen für gute Verhandlungen. Wir verhandeln immer, sogar ein 3-Minuten-Gespräch mit der Bedienung im McDonalds ist eine Verhandlung.

weiter lesen

Googles Doodles

Marcin Wichary erzählt über die Arbeit an Doodles für Google:

Ich bin fasziniert wie viel Kraft in die Spielereien investiert wird.

weiter lesen

Smartphones und ihr größtes Problem

Als ich meinen HTC mit Windows Phone Betriebssystem gekauft habe, wurde mir eine weitere Batterie geschenkt. Seit diesem Zeitpunkt habe ich ständig ein voll aufgeladener Akku in Rücksack und bleibe nie ohne Strom sitzen (ein Mal, ich war auf einer Reise, gingen mir sogar beide Akkus leer, aber so unvorbereitet bin ich selten).

Das größte Problem elektronischer Geräten ist der Strommangel. Ein iPhone kann mit mir sprechen, komplizierte mathematische Probleme lösen und Informationen blitzschnell finden. Doch ich muss ihn, wie kleines Kind, immer wieder zu Steckdose bringen und von Hand füttern.

Warum kann sich so ein kluges Gerät nicht selbst versorgen?

weiter lesen

Nachrichten zusammenstellen, statt mühsam zu schreiben.

Facebook hat eine coole Funktion in diesem Video vorgestellt:

Menschen sprechen in Sätzen und Menschen sind faul. Also geben wir ihnen die Möglichkeit richtige Sätze einfach zusammenzustellen, statt zu schreiben.

In wenigen Sekunden wird eine lesbare und höfliche Nachricht zusammengestellt:

facebook-reporting-photo-dialog-continue

Menschenfreundliche Nachricht kann gesendet werden

 

Es bleibt nur die Frage: Warum heißt das blaue Button „Continue“ statt „Send“?

weiter lesen

Zwingende Registrierung auf Webseiten

Ich probiere ständig neue Webseiten aus. Viele von ihnen bieten mir nützliche Funktionen an. Leider, erst nach der Registrierung.

Wie sieht mein erster Kontakt mit der Webseite aus?

Häufiges Szenario:

  1. Rufe Webseite auf
  2. Sehe mir an, was ich dort machen kann
  3. Klicke auf „Registrieren“ und gebe meinen Nickname, meine E-Mail-Adresse und Passwort ein
  4. Warte auf Bestätigungsmail um dort auf einen Link zu klicken
  5. Kann Webseite endlich nutzen.

Zwischen Schritten 4 und 5 können, eventuell, unendlich viele Zwischenschritte geben.

Richtiges Szenario (so, soll es sein):

  1. Rufe Webseite auf
  2. Sehe mir an, was ich dort machen kann
  3. Nutze die Webseite.
  4. um die Änderungen zu speichern gebe meine E-Mail-Adresse an.

Ich will die Webseite nutzen! Und nicht mich irgendwo registrieren und hoffen, dass alle versprochen Funktionen tatsächlich nutzbar sind.

Ich als Nutzer habe im richtigem Szenario keine Wiederstände die Webseite auszuprobieren und habe nach erfolgreichem Nutzen mehr Lust meine Daten dort zu hinterlassen. Für jeden neuen Nutzer muss ein temporäres Profil erzeugt werden, das nach dem ich die E-Mail-Adresse eingebe mir zugewiesen wird.

Daten für meinen Profile können nach und nach, in nützlichen Situationen abgefragt werden. Zum Beispiel, falls die Webseite meinen Stadt wissen will, soll sie mir  etwas im Gegenzug anbieten. Vielleicht, eine Suchfunktion um andere Nutzer in der Nähe zu finden, oder besondere Aktionen, die nur in meinem Stadt möglich sind.

Sofortige Registrierung auf den Webseiten ist nur dann sinnvoll, wenn es per Gesetz geregelt ist. Wenn mir einer zeigen kann in welchen Fällen ich  den Nutzer erstmal zur Registration zwingen muss, werde ich sehr dankbar sein.

 

weiter lesen

Radio in Windows Phone 7

Es ist cool, wenn man Radio unterwegs hören kann. Leider verstehen es nicht viele Handyhersteller.
Vielleicht liegt es an der Tatsache, dass Radio nur schlecht kontrolierbar ist und z.B. Apple Angst um ihre Konsumenten hat, weil sie kein gutes Klang liefern kann.

Vielleicht, weil Radio keiner braucht.

Doch Windows Phone muss sich von Anderen nicht nur im Interface unterscheiden. Windows Phone hat eine eingebaute UKW-Radio. Finden kann man es im Zune-Hub.

Auf meinem HTC Trophy ist Radio Unterwegs nicht nutzbar. Empfang ist schwach, um etwas ohne Rauschen zu hören. Im Zimmer ist der Empfang gut.

Tippen und länger halten

Um Radio über das Lautsprecher zu hören, muss man Stationsnummer antippen und halten. Um es herauszufinden brauchte ich ein halbes Jahr. Wieso nicht einfach ein Button im Menübar?

weiter lesen

Interface ist das Böse

Keine der Firmen, die Ihnen das Interfacedesign verkaufen, wird sagen „Interface ist das Böse“. Sie werden niemals zugeben, das Interface kein Geld für die Kunden bringt.

Aus der Sicht der Systemtheorie ist Interface eine enge Stelle mit kleinem Wirkungsgrad, wo Geschwindigkeit, Energie, Kapazität, Zeit, Nutzer und Geld Verlohren gehen. Am wenigsten effektiv sind die Benutzeroberflächen in Grafikdesign. Im Unterschied zur Bedienelementen an den Geräten und Maschinen lassen die Benutzeroberflächen viel Platz für menschliche Fehler und Unstimmigkeiten.

Interface zu minimieren ist teuer und kompliziert, doch ohne ihn funktioniert das System viel effizienter.

Einfachstes Beispiel – zwingende Registrierung in Web-Shops. Erst mal ist Käufer gezwungen sich Login und Passwort auszudenken, danach soll er sich vor dem System rechtfertigen und sein E-Mail bestätigen. Diese für den Nutzer, schwachsinnige Aktionen, verzögern das Kaufen, filtern unerfahrene Käufer raus und spiegeln sich im Umsatz wieder.

Leistungsfähiges Geschäft verkauft ohne künstlichen Barrieren:

Mobilfunk Anbieter haben keinen Button „Eine SMS kaufen“ oder „drei Gesprächsminuten kaufen“. Wenn Abonnent nicht jedes Mal sich zum Kauf entscheiden muss, fällt ihm leichter sich vom Geld zu trennen. Kauf finden überhaupt ohne Interface statt:

Interface senkt die Effektivität und Leistungsfähigkeit eines Systems. Deshalb muss es versucht werden Kontakt mit ihm zu minimieren, ohne der Funktionalität zu schaden. Es müssen neue Szenarien der Konversation entwickelt werden.Dann ist es möglich unnötige Barrieren zwischen Kunden und Waren, zwischen Verkäufer und den Geldern des Käufer zu entfernen.

Original: http://artgorbunov.ru/en/bb/ui/evil/

weiter lesen

Firefox Konzept für Metro Oberfläche

Mozilla hat ihre Vorstellungen davon, wie das Firefox in Windows 8 mit der Metro Oberfläche, arbeiten soll, vorgestellt. Ich finde es gut. Endlich haben die Entwickler verstanden, gute Apps in Metro zu bauen. Besonders der Umgang mit den Tabs finde ich gelungen.

Windows 8 wird uns schon in wenigen Wochen zur Verfügung stehen.

weiter lesen

Realistischer Schatten mit Photoshop.

Um Schatten von einem Objekt zu erzeugen benutze ich der „drop-shadow“ Effekt im Photoshop. Doch es kommen unrealistische und flache Schatten raus.

Wie man es besser macht, hat Ilya Birman vorgestellt. Es ist genauso schnel umgesentz, sieht, aber viel realistischer aus.

 

weiter lesen

Ergonomisches Arbeitsplatz für Programmierer

Ergonomie ist die Wissenschaft von der menschlichen Arbeit. Man versteht darunter die Anpassung der Arbeitsbedingungen an den Menschen und nicht umgekehrt. Ziel ist es eine gute Arbeitsatmosphäre zu schaffen und die Bedingungen so zu gestalten, dass möglichst geringe gesundheitliche Belastung entsteht.

Ist so ein Arbeitsplatz ergonomisch genug?

Screen Shot 2015-04-05 at 21.18.01

Aus einem Microsoft Cloud Werbevideo

 
Die Fragen des effektiven Arbeiten beschäftigen mich in letzter Zeit immer wieder.

weiter lesen

Details. Bildergalerien auf deutsche-startups.de

Schauen Sie sich die Bildergalerie auf der Website deutsche-startups.de an. Was fällt auf? Kleine Bilder, gedrückt in eine Spalte neben dem Sidebar. Wie kann ich schnell helfen? So:deutsche-startups-details-bildergalerie

CSS-Änderungen:

Ich würde die Bilder auf 100% der Breite anzeigen, dafür sind aber mehrere Änderungen notwendig. Und natürlich sollen die Bilder alle auf einer Seite sein, ohne die ganze Seite immer neu zu laden, aber das ist die nächste Geschichte.

weiter lesen

Details. Computerbild Website

Durch kleine Änderungen können Websites besser werden. Heute stelle ich Änderungen an der Startseite von Computerbild.de vor. Mit nur einer Änderung in CSS wirkt die Website aufgeräumter.
computerbild-details

#cbheader .metanav{
background: #f1f1f1;
}

Das wars.

weiter lesen

Weniger Optionen = mehr Einnahmen

Zur Zeit lese ich ein interessantes Buch «Die 4-Stunden Woche» von Timothy Ferris. Er erzählt in dem Buch darüber, wie er es geschafft hat, weniger zu Arbeiten. Und gibt Tipps wie es auch Anderen gelingen kann.

Ich möchte hier ein Paar wichtigen Zitaten vorführen:

Joseph Sugarman ist ein Marketinggenie. Einmal sollte er eine Anzeige für eine Armbanduhrkolletion entwerfen. Der Hersteller wollte neun verschiedene Uhren in der Anzeige unterbringen, während Joe dafür war, nur eine zu zeigen. Der Kunde bestand auf seiner Meinung Joe bot an, beide Anzeigen zu gestalten und sie dann in der gleichen Ausgabe des Wall Steet Journal zu testen. Das Ergebnis? Das Angebot mit einer Uhr verkaufte sechs mal so viele Uhren, wie das Inserat mit neuen Uhren.

und danach erklärt Timothy was er aus dieser Geschichte gelernt hat:

Zu viele Optionen verunsichern den Kunden, fördern die Unentschlossenheit und führen zu weniger Bestellungen — und damit hat man allen Beteiligten einen schlechten Dienst erwiesen. Denn je mehr Optionen man dem Kunden bietet, desto mehr Produktions- und Kundendienstlast bürget man natürlich auch selbst auf.

Die Kunst besteht darin die Anzahl der Entscheidungen, die Ihr Kunde treffen kann oder treffen muss möglichst klein zu halten.

Ich glaube viele Leute in der heutigen Wirtschaftwelt haben offenbar vergessen: «Dienst an Kunden» bedeutet nicht, dass man jede seiner Laune befriedigen muss. Begrenzen Sie Anzahl an Wahlmöglichkeiten auf eine, oder zwei (Basis und Premium) — nicht mehr.

Streichen Sie telefonische Auftragsannahme komplett und verweisen Sie alle Kaufinteressenten auf Ihre Website. Das mag auf den ersten Blick wie Kamikaze aussehen, bis man sich klar macht, dass Erfolgsunternehmen wie etwa Amazon gerade dank solcher fundamentalen Kosteneinsparungen wachsen und gedeihen.

weiter lesen