Weniger ist mehr: Gestaltung unter dem Aspekt der Aufmerksamkeitsökonomie

Weniger ist mehr: Gestaltung unter dem Aspekt der Aufmerksamkeitsökonomie

Das Konzept der Aufmerksamkeitsökonomie versteht die menschliche Aufmerksamkeit als eine begrenzte Ressource. Je mehr Informationen auf den Wahrnehmenden »einprasseln«, desto mehr dieses knappen Gutes benötigt ein Mensch um diese zunächst zu sortieren und zu priorisieren, bevor sie verarbeitet werden können.

(mehr …)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Styling Webforms

Styling webpages? Easy.
I’m guessing a lot of you had to work with CSS at some point in their lives.
Most parts of the web are fairly easy to style,
especially if you know some of the little hacks that you have to use to make a page look pretty.
So you go ahead and style everything the way you want it:
Nice grey background, elements in different shades of blue a bunch of elements in pink for contrast.
You put a nice image as a header for your page and add a sidebar, things that appear and disappear when you hover over them, even some nice animations.
All looking good.
Styling forms? Not so much.
Then you get to the user settings.
You try to apply styles to the checkboxes. Nothing happens.
You try to apply styles to the dropdowns of select elements. Nothing happens.
Need a date selector? Good luck on doing anything to that one!
But why is it so hard to style webforms?
In the end it all comes down to the fact that styling form elements is left up to the browsers.

A select will look different in Chrome than in Safari, Firefox, IE or any other User Agent.
But then again, in a Chrome browser a select will look the same in every web page you look at.


I’m not talking about whether you should or shouldn’t overwrite those defaults.
There are a lot of arguments for and against it, but all I’m going to focus on in this post is the how.


How do you restyle checkboxes?
Especially hacky is how the restyled checkboxes work:
The actual checkbox input is to be hidden:


input[type="checkbox"] {
position: absolute; // take it out of document flow
opacity: 0; // hide it
}

The new box for the checkbox is then built into the label of the checkbox with the ::before selector.
The tick is then styled with the ::after selector like this:


input[type="checkbox"] + label:before {
// Box for Checkbox
}


input[type="checkbox"] + label {
// Actual label
}


input[type="checkbox"]:checked + label:after {
// Tick
}

That way you can have a completely customised checkbox.
How does it look like all put together?
I had a little project where I spent a week researching how to make a webform pretty with only CSS.
The result was a melange of tips and tricks I found all over the web. (That little checkbox trick that i just explained was one of them)
Check it out below!

See the Pen Formstyles for Blogpost by Feu (@the_Feu) on CodePen.

NETWAYS Online Store – mit PrestaShop

Einige werden sich bereits gefragt haben, welche Shop-Software wir in unserem neuen Store eigentlich verwenden. Die Antwort ist PrestaShop, eine elegante Open-Source Lösung aus einer französischen Softwareschmiede, welche  inzwischen schon über 115.000 aktive Shop-Systeme zählt. Nun haben wir sie auch und sind wirklich positiv überrascht. PrestaShop ist natürlich kostenlos und bringt viele wirklich tolle Features mit sich. Was noch nicht vorhanden ist kann relativ einfach mit (meistens) kostenfreien Plugins nachgerüstet werden. Der alte NETWAYS-Online-Store lief übrigens mit der weitaus bekannteren Software Magento.
Warum hat NETWAYS plötzlich PrestaShop im Einsatz?
Unser alter Shop hatte wirklich ein Redesign nötig, lange haben wir überlegt, das bestehende System nochmal komplett aufzuarbeiten, haben uns letztendlich dagegen entschieden. Aktuell kursiert das Gerücht, die Magento Community Edition wird nicht mehr weiter entwickelt, doch gerade bei einem Online-Shop mit sensiblen Kundendaten ist ein stets aktuelles und sicheres System sehr wichtig. Deshalb fiel die Entscheidung auf eine Migration auf ein neues System. Nach ein paar Vergleichen, mit spezieller Gewichtung auf grafische Anpassbarkeit, B2B-Shop Funktionalität und natürlich Open-Source ist die Wahl dann auf Presta gefallen.
War der Umzug kompliziert?
Wir haben uns außerdem dazu entschieden, die komplette Produktpalette anstatt sie einfach nur zu importieren, neu anzulegen, so wird eine gewisse Aktualität der Produkte sichergestellt. Außerdem wurden die Kundendaten aus unserem alten System exportiert und in das neue System importiert, dabei haben wir jedem Kunden ein eigenes, nahezu unknackbares Kennwort mit 32 Zeichen hinterlegt. Die Kunden wurden per Mail aufgefordert, ein neues Passwort anzufordern und dieses dann zu ändern. In Summe war die Migration der Daten zwar von der Menge her viel, jedoch war der Aufwand mit der richtigen “Taktik” überschaubar.
Wieso stimmen die Links mit dem alten Shop überein?
PrestaShop ist von Haus aus, was die Links angeht relativ einfach gestrickt und kann einen Artikel-Link im Normalfall nur so darstellen: http://shop.netways.de/28-produkt.html. Was natürlich problematisch ist, da wir unsere Links mit allen Unterkategorien darstellen möchten z.B. so: http://shop.netways.de/alarmierung/gsm-modem-ethernet/multi-tech-smsfinder.html. “alarmierung” ist die erste Unterkategorie und “gsm-modem-ethernet” die Unterkategorie von Alarmierung, dies ermöglicht unseren Kunden stets einen guten Überblick, in welcher Kategorie sie sich gerade befinden. Realisiert haben wir diese Link-Erzeugung mit dem AddOn URL Rewriting +.
Was ist so besonders an PrestaShop?
PrestaShop fand ich von Anfang an sehr interessant, z.B. die Möglichkeit von einem Produkt mehrere Varianten anzulegen, dadurch wirkt der Shop sehr aufgeräumt und erleichtert dem Kunden die Auswahl der richtigen Lösung. Anhand des Beispiels unserer SecurityProbe sieht man sehr deutlich das Feature der Variantenauswahl. So kann der Kunde auswählen, ob das Produkt eine SMS-Alarmierung mitbringen soll und ob und in welcher Anzahl Anschlussmöglichkeiten für potentialfreie Kontakte vorhanden sein sollen. Der Preis sowie die Artikelnummer werden automatisch angepasst. Magento sollte dieses Feature zwar auch mitbringen, jedoch funktionierte das nicht wirklich.
Außerdem besticht PrestaShop durch viele tolle Designs (welche zum Teil auch wieder Geld kosten) und tollen Effekten z.B. dem Ajax-basierten Warenkorb. Demnächst wird Version 5 von Presta angeboten, dieses besticht dann mit einer vollständigen B2B-Integration, sowie einem überarbeitetem Backend und reichlich neuen Features.
Welche Plugins sind verfügbar?
Eigentlich gibt es für alle denkbaren Anforderungen Add-Ons, sei es nur das PayPal Zahlungsmodul, über die Möglichkeit den Smarty-Cache zu leeren, URL-Rewrites, Slideshows usw. ..
Ist der neue Shop schon online?
Ja, der neue Shop ist seit Anfang August online und muss seither dem Ansturm unserer Kunden standhalten. Bisher können wir von keinen Ausfällen oder Schwächen berichten. Zu sehen ist unserer Shop rund um die Uhr unter http://shop.netways.de

Georg Mimietz
Georg Mimietz
Lead Senior Systems Engineer

Georg kam im April 2009 zu NETWAYS, um seine Ausbildung als Fachinformatiker für Systemintegration zu machen. Nach einigen Jahren im Bereich Managed Services ist er in den Vertrieb gewechselt und kümmerte sich dort überwiegend um die Bereiche Shop und Managed Services. Seit 2015 ist er als Teamlead für den Support verantwortlich und kümmert sich um Kundenanfragen und die Ressourcenplanung. Darüber hinaus erledigt er in Nacht-und-Nebel-Aktionen Dinge, für die andere zwei Wochen brauchen.

Jasper Reporting – Design Tips

Jasper-ReportingBereits im letzten Post haben wir den Report auf den Server geladen, jedoch sieht dieser aktuell noch etwas spartanisch aus. Es lohnt sich meistens am Ende noch etwas Zeit in die optische Aufbereitung der Reports zu investieren. Schon alleine um die Akzeptanz beim Empfänger zu verbessern. Über Schrift, Farben und Formen hinweg bietet iReport im Palettenbereich eine Vielzahl an Möglichkeiten.
Wir starten mit dem Einfügen eines Logos. Dieses kann entweder via URL von einem Webserver geladen oder in das Jasper-Repository kopiert werden.post5_screen1 Der Upload via iReport erfolgt wie auch beim Bericht via Kontextmenü durch Anlage einer neuen Ressource. Wichtig ist, das als Typ Image verwendet wird, um Probleme bei der Einbindung auszuschliessen.
post5_screen2Anschließend kann über die Palette ein Bildobjekt im Report platziert werden. Falls das Bild auf dem Server bereits verfügbar ist, kann die Auswahl hier abgebrochen werden und als Expression folgendes eingetragen werden.

"repo:/reports/Images/Banner

Der Name muss hier mit dem entsprechenden Repositorynamen übereinstimmen und da wir uns in der Welt von Java bewegen ist die Unterscheidung zwischen Groß- und Kleinschreibung wichtig.
Oberhalb des Arbeitsbereiches oder bei den entsprechenden Objekten im Eigenschaftsbereich können nach Belieben Schriftart und -größe eingestellt werden.
Reports mit vielen Zeilen wirken schnell unübersichtlich. Daher empfielt es sich solche Textwüsten wenigstens mit abwechselnd dunklen und hellem Hintergrund zu unterlegen. Dies ist mit einem kleinem Kniff auch mit iReport möglich. Nach Einbindung eines farbigen Rechtecks im Detailband kann dieser abwechselnd zur Zeilennummer angezeigt werden. Hierfür muss man in die Eigenschaft “Print When Expression” folgendes einfügen:

new Boolean( $V{PAGE_COUNT}.intValue() % 2 ==0 )

post5_screen5Über das Palettenobjekt “Page X of Y” kann noch schnell ein Seitenzähler integriert werden und fertig! Hier wieder das Ergebnis als PDF und den Report als Download bei netways.org.
Im nächsten Post widmen wir uns der Übergabe von externen Parametern.

Bernd Erk
Bernd Erk
CEO

Bernd ist Geschäftsführer der NETWAYS Gruppe und verantwortet die Strategie und das Tagesgeschäft. Bei NETWAYS kümmert er sich eigentlich um alles, was andere nicht machen wollen oder können (meistens eher wollen). Darüber hinaus startet er das wöchentliche Lexware-Backup und investiert seine ganze Energie in den Rest der Truppe und versucht für kollektives Glück zu sorgen. In seiner Freizeit macht er mit sinnlosen Ideen seine Frau verrückt und verbündet sich dafür mit seinem Sohn.