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

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

Erfolgreiche Produkte entwickeln

Ich versuche wichtige Gedanken aus den Büchern, die ich lese schriftlich festzuhalten. Nir Eayl erzählt, wie man erfolgreiche online Services baut.

Ein Auszug in meiner Übersetzung:

***

Häufig verwendete Produkte haben größeres Wachstumspotenzial als seine Konkurrenten. Zum Beispiel hat Facebook alle Konkurrenten überholt, darunter MySpace und Friendster, trotz der Tatsache, dass er sehr spät auf Party der sozialen Netzwerken kam.

Mark Zuckerberg-Gegner haben, zum Zeitpunkt der Markteinführung seiner Website, schon Millionen von Anwendern. Und Facebook war zunächst ausschließlich für Studenten der Harvard-Universität bestimmt. Aber es ist seine Firma, die schließlich die Branche dominiert.

Ein Teil des Erfolgs war das Ergebnis der Regeln, die ich als „mehr-mehr“ bezeichne: häufige Nutzung bietet schnelles virales Wachstum. Wie David Skok, ein Venture Capitalist formuliert: „Der wichtigste Faktor, um das Wachstum zu beschleunigen ist die Dauer der viralen Zykluses“.

Dauer der viralen Zyklus – die Zeit, die der Benutzer braucht, um einen anderen Benutzer einladen. Es kann einen großen Unterschied in der Lebensdauer des Produktes ausmachen. „Zum Beispiel, ist die Dauer des viralen Zykluses zwei Tage, dann erreichen Sie in zwanzig Tagen 20.470 Benutzer – Skok schreibt. – Aber wenn Sie es halbieren, bis zu einem Tag, werden Sie mehr als 20 Millionen Nutzer zu bekommen!“

Erhöhung des Anteils von Clients, die auf den täglichen Service, zugreifen ist gut für den Service, aus zwei Gründen. Erstens, tägliche Nutzer initiieren neue Virus-Zyklus öfter (sagen wir, sie verlinken ihre Freunden auf den Fotos bei Facebook). Zweitens, je mehr aktive Benutzer pro Tag, desto mehr Antworten und Reaktionen auf die Einladungen. Kurze und effektive Viral-Zyklus einbezieht immer mehr Nutzer in das Netzwerk.

Aus dem Buch „Hooked: How to Build Habit-Forming Products“

Screenshot 2014-07-30 14.43.56

weiter lesen

Warum ist der Mauszeiger um 45° gedreht?

Auf der Frage-Antwort Platform StackExchange wurde eine auf dem ersten Blick blöde Frage gestellt: warum sind die Mauszeiger auf allen Betriebssystemen etwas schief? also haben einen gewissen Neigungswinkel, statt gerade nach oben zu zeigen? Tatsächlich, Mauszeiger sind schief, wäre ein vertikal ausgerichteter Zeiger fürs markieren von Text und andere Aufgaben praktischer?

Ein vertikales Mauszeiger

Ein vertikales Mauszeiger

Einer der Antworten kommt von einem Experten, der die Geschichte der Komputertechnik gut kennt. Er bestätigt, Entwickler von Komputermäusen Douglas Engelbart hat den Zeiger als ein nach oben gerichtetes Pfeil konzipiert. Es ist wirklich eine logischere Möglichkeit Text auf dem Bildschirm auszuwählen.

Allerdings, wurde graphisches Interface eines Betriebsystems erstmal in der Firma Xerox realisiert. Genauer gesagt in deren Entwicklungsabteilung in Palo Alto Research Center. Mauszeiger wird in einem Dokument aus dem Jahr 1981 beschrieben. Dieser Dokument ist die Beschreibung des XEROC PARC – ersten  Komputer mit einem graphischen Benutzerinterface.

Bei der Projektierung dieses Komputers wurde festgestellt, dass niedrige Auflösung des Monitors es nicht erlaub einen guten vertikalen Zeiger zu zeichnen. Da der Zeiger klein bleiben sollte und man es nicht vergrößern wollte, wurde entschieden: Zeiger wird etwas gedreht, so dass er eine vertikale und eine um 45° gedrehte Seite haben wird.

Mauszeiger – auch als Cursor bekannt.

Aus der Dokumentation des  Palo Alto Research Zentrums.

Mehr als 30 Jahr sind vergangen, wird haben hochauflösende Monitore, doch die Tradition den Zeiger um 45° zu drehen bleibt.

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

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

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

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

Mobile Webseiten verbessern. Heise.de

Ich habe mir darüber Gedanken gemacht wie man die mobile Version von heise.de besser gestalten kann.

Durch kleine Änderunden im Header sieht die Seite aufgerümter aus. Blöke mit der Information sind eindeutig zu sehen und helfen beim Lesen von Nachrichten.

Das Redesign der Webseite ändert nicht an der Information, nur an dem Informationsaufbau. Eine logisch aufgebaute Webseite ermöglicht es Information treffend, klar und eindeutig zu präsentieren. So wird jeder Besucher bei seiner Aufgabe auf der Webseite unterstütz und durch das internes System sicher zum Ziel begleitet.

weiter lesen

Hello World mit Python

Auf Mac OS ist Python vorinstalliert. Mit python --version siehe ich die Version: meine ist 2.7.10.

Python ist eine Skriptsprache. Ähnlich wie Javascript braucht Python keine große Umgebung. Das Hello World mit Python sieht so aus:

Definition und Aufruf von hello Funktion in Python

Mit python hello.py wird der Code ausgeführt

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

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

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

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