Snygga detaljer på webben: Hemnets nya ipad-app

01 Hemnet karta cirkel filtrering flagga

Nyligen lanserade Hemnet.se en helt ny app för iPhone och iPad, utvecklad internt. Jag tog mig en titt på appen och hittade flera snygga och smarta detaljer.

Nedanstående skärmdump innehåller det mesta jag gillar med appen. Det visar hur enkelt det är att markera områden man vill söka bostad i (jag har valt den delen av Hornstull som ligger närmast vårt kontor), flaggorna som ger överskådlig information om varje bostad och hur man ändrar information som visas. Vi kan också se att Hemnet använder Apples inbyggda kartor i appen (det syns ännu bättre i en annan skärmdump längre ner på sidan). Dessutom syns notiserna som pekar ut olika funktioner för användaren första gången man använder appen. Smart och hjälpsamt.

Hemnet-karta med cirkel, filtrering och flaggor

Om du hellre söker på gata, stad eller område utan att rita funkar det naturligtvis också. De här båda skärmdumparna visar hur Hemnet lyckas ge användaren många valmöjligheter utan att det blir oöverskådligt.

Hemnet-sökning

Hemnet-sökning

Personligen föredrar jag att lista bostäderna i träfflistan baserat på pris per kvadratmeter. Det, och mycket mycket mer, finns med i listan över filtreringsmöjligheter. Det är sammanlagt två scrollar med olika filter. Klicka bara på ”Fler alternativ” så visas alla alternativen.

Filtrering av en sökning på Hemnet

Om något ska få svenska iPad-användare att börja använda Apples egen kartapp är det nog Hemnet, dels naturligtvis eftersom det är så många som använder Hemnet-appen, men också för att det är så snyggt.

Hemnet använder Apples kartor i appen

Någon jag däremot inte gillar är att lösenordet syns i klartext när man loggar in, om man inte aktivt väljer att klicka på Dölj. Och eftersom standard över allt annars är att lösenordet inte syns när man skriver in det tycker jag att det är en rätt dålig säkerhetsdetalj.

Lösenordet visas i klartext när man skriver in det om man inte klickar på Dölj

Kanske något att inspireras av nästa gång ni funderar på att göra om er sajt?

The untold origins of 6 common computer icons

Icon_orign_mast

Origin graphic

Sometimes the simplest tasks of everyday life are performed with the instant recognition of an icon.  A Simple visual metaphor that helps us share music, find spots on a map or remotely message your boss while you work from your favorite café/home. But how exactly did some of the more common yet abstract icons on our computers come to be? If our brains use metaphor to bring familiarity and understanding to our surroundings, someone must have put effort into designing this visual language; right?

Well, after a little digging, I found some answers. Although, some are debatable.

Power

power icon
This symbol evolved from the on and off labels used on the interface of early analog control boards. Engineers used binary code to indicate whether a switch was supplying full power (1) or disconnecting a device from its power source (0).  Eventually the 1 and 0 merged into a unified symbol that could be placed on a single toggle button.

Command

command icon
The infamous Apple command key. Created by Susan Kare under direction of Andy Hertzfeld, a key member of the Macintosh development team in the 80s. In trying to figure out how to translate menu commands on to a keyboard they initially came up with the “apple button.” This button could reference specific actions when pressed in conjunction with other keys. However, Steve Jobs refused to use an apple icon on the button stating, “There are too many Apples on the screen! It’s ridiculous! We’re taking the Apple logo in vain. We’ve got to stop doing that!” A quick redesign ensued and after scanning through an international symbol dictionary Susan came across the Gorgon loop; the floral symbol that indicates an attraction or point of interest in Sweden. And the fun thing is that that sign is based on Borgholm castle.

Bluetooth

Origin graphic
You can thank the Danish King Harald Blatand for inspiring this icon. His initials make up this popular symbol by combining the old Danish runes of H and B. Legend has it that he loved blueberries and one of his teeth were permanently stained blue but he’s mostly known for uniting warring factions in Scandinavia – just like Bluetooth allows various devices to integrate with each other.

At

at icon
Depending on where you live you might know it by a different name. The elephant’s trunk-a (Swedish), the monkey’s tail (German), little mouse (Chinese) or the worm (Hungarian). It was used by computer programmer Raymond Tomlinson in the early seventies to send the first electronic message. He wanted a unique character that could separate a user’s name from their location on a network. For him the “at” symbol was an obvious choice since it was unlikely to appear in anyone’s name and it indicated that the recipient is sitting “at” this specific computer.

But the symbol existed long before emails started swarming your inbox. Some linguists site its appearance in the 6th century as a way for Latin scribes to simplify the word “ad” meaning “at” or “toward” that was not easily confused with AD (Anno Domini). Others claim it emerged in the 18th century as a commerce symbol used to indicate price per unit, as in 1kg of bacon @ 50 :-

USB

usb icon
Neptune’s trident was the inspiration for this common icon. The different shapes at the tips of each prong represent the different devices that can be attached with this standard.

Play

play icon
Granted, this one was around way before Winamp or the classic Windows Media Player but, as a music geek, I found its not-so-definitive origin interesting. It’s thought to have first appeared in the 60s on reel-to-reel tape decks as a tape transport symbol. The direction of the arrow told the operator which direction the tape was moving

Making the News Accessible for All

Ziggy was recently tasked with redesigning the 8sidor.se website. 8sidor is a newspaper written in easy to read Swedish, published by Centrum för Lättläst for the last 30 years. 8sidor’s website offers similar content to the subscription publication, while offering digital tools such as language translation and the ability to listen to the news.

The current website needed to be updated and simplified, allowing for ease of use for all of its visitors, including those with physical or developmental disabilities, immigrants, elementary school students, and other people who have difficulties reading traditional newspapers.

The website is still under development, but several key points emerged early on in the design process.

Keep design patterns consistent

One issue with designing a website for such a varied group of users (some of whom may have developmental disabilities) is to keep the layout predictable and easy to understand.

  • The side column is always present on left side of page, and only shows news stories (as opposed to promotional content or internal links)
  • The right column was eliminated to keep distractions to a minimum for users who have a hard time concentrating while reading
  • News category color-coding was carried over from print edition, and is consistent throughout the site

Delete, Delete, Delete

The existing website, while functional, has a lot of material which would benefit from better organization. In addition, helpful tools such as translation assistance or being able to listen to the news, are placed in the header of the site, as opposed to being closer to the content where they can be used. In our design, we have:

  • Removed visual clutter
  • Removed or relocated unnecessary functions and navigation
  • Group similar information together
  • Moved relevant tools close to the content

The footer was redesigned to contain a denser amount of website-specific content (as opposed to distracting from the news stories themselves):

Content is King

In order to focus the user’s attention on the news stories, we have redesigned the header of the site to be simpler and less distracting, while still maintaining a familiar look and feel.

The overall design is still in development, but we are exited to move forward with user testing and the eventual launch of the new site.

7 exempel på hur begränsningar sporrar kreativiteten

poesi

Låt mig börja mer ett experiment. Ta fram ett tomt papper och skriv en dikt. Den kan handla om vad som helst, ha valfri längd och du har obegränsat med tid. Säg till när du är klar.

Ta fram ett nytt papper. Du har fem minuter på dig att skriva en dikt om en myra som är vilse i skogen. Dikten ska vara på max åtta rader och innehålla följande ord (i valfri form): frost, himmel, obeskrivlig, krama, spik.

Spontant borde den första delen vara lättare. Du kan göra precis vad du vill, ingen sätter käppar i hjulen. Kreativ frihet till max. Men förmodligen tycker du som de flesta andra att det var lättare och snabbare att få fram en dikt i den andra delen. Inte konstigt att just kylskåpspoesi fick en sådan stark boom för några år sen. Det var bara att plocka ihop några ord och vips så har man skapat ett litet konstverk.

En teori om anledningen till detta är the paradox of choice som jag skrivit om tidigare. Vi tycker att det är jobbigt att ta beslut eftersom vi måste analysera och jämföra alla alternativ. ”Ska jag skriva en dikt om kärlek, döden eller min cykel? Ska den vara lång eller kort, sorglig eller rolig, rimma eller bara flyta på?” Skrivkramp paralyserar din hand och du hamnar i en ond spiral av obeslutsamhet. Däremot, om det redan finns en färdig låda med ord eller regler så kan man hoppa över större delen av den jobbiga urvalsprocessen och börja med det som faktiskt är kul, att skapa.

Det jag försöker säga här att begränsningar (oftast) inte är av ondo. Vi skyller gärna våra misslyckande på dem. ”Om jag hade bara mer tid, pengar, frihet, så skulle jag kunna göra precis det jag vill.” Men om man omfamnar begränsningar så kan man lätt omvandla dem till något positivt eller ett stilistiskt grepp. Begränsningar hjälper dig att fokusera, sålla bort allt onödigt som du inte kan eller får använda och koncentrera dig på det du har. Du tvingas att verkligen gå på djupet av problemet och i detalj studera alla möjligheter och kombinationer som din verktygslåda erbjuder. Trots sin negativa klang så kan de vara något riktigt bra och tvinga fram nya, oväntade lösningar.

I konstvärlden finns det otaliga exempel där begränsningar sporrar kreativiteten. Här är sju av mina favoriter.

1. Dogma 95

Den kontroversielle danske regissören Lars von Trier startade Dogma 95 med väldigt hårda regler på hur en film skulle vara och produceras. Syftet var att komma närmare verkligheten och eliminera alla artificiella tillägg.

2. Gudfadern

När en annan superregissör, Francis Ford Coppola, filmade Gudfadern upptäckte han att bilen han skulle använda hade styrningen på fel sida. I stället för att ödsla tid på att hitta en ny bil lät han spegelvända registreringsskylten och sen återigen spegelvända filmrutorna i den färdiga filmen. Resultatet blev precis lika bra och ingen i publiken märkte någon skillnad.

3. Blair Witch Project

Det finns många fler filmexempel där liten budget faktiskt varit en viktig framgångsfaktor. Första Blair Witch Projekt-filmen var en sensation, där den handhållna kameran och amatörmässiga filmningen enbart bidrog till känslan av autenticitet. Uppföljaren fick en riktigt stor budget som därmed dödade all nytänkande kreativitet och det som gjorde första filmen så unik. Jag behöver knappt nämna att den floppade. Det finns mängder av liknande filmöden.

4. Resident Evil

Tekniken går fram med rasande fart men kan fortfarande vara rätt begränsande. I det gamla skräckspelet Resident Evil gick man runt i en öde herrgård fylld med zombies. För att maskera de långa laddningstiderna visades en animation av en dörr som långsamt öppnades. Det gav även spelaren chans att andas ut men även att under ett antal plågsamma sekunder fantisera fram hemskheter som väntade i nästa rum. En ny generation av konsoler behövde inte laddningstiden så dörrscenen plockades bort, men efter högljudda protester från spelarna fick den sättas tillbaka. Spelutvecklarna hade helt missat vilka andra positiva effekter deras nödlösning innebar.

5. Silent Hill

I ett annat skräckspel, Silent Hill, var spökstaden inbäddad i en tät dimma. Anledningen var förstås att konsolen inte orkade att rita upp all grafik. Med bättre hårdvara plockades dimman bort och därmed hela den klaustrofobiska stämningen. Att se ett monster klart och tydligt på flera hundra meters håll var inte lika läskigt som när det plötsligt dök upp framför dig.

6. Sworcery

Den gamla 8-bitars kulturen har skapat en egen stil och trots dagens kraftfulla teknik så använder många fortfarande både grafiken och ljudet som en viktig komponent i designen. Mitt favoritexempel är Sworcery till iOS. Det finns även en hel musikscen som bara använder (eller simulerar) ljud från gamla datorer och konsoler.

7. Smartphonen

Mobiltelefonen är ett annat bra sätt att beskriva begränsningar. Jämfört med andra enheter har den en liten skärm, klenare hårdvara och ofta sämre uppkoppling. På desktop kan man slösa med utrymmet, visa allt på en gång och överösa besökaren med animationer och annat fluff. Mobilens begränsade ytan tvingar utvecklarna att prioritera, skala bort och visa bara det som är viktigast för mig just nu. Det är därför ingen slump att mobilversioner är ofta en trevligare, tydligare och framför allt snabbare upplevelse. Mobilen är inte längre en nedbantad version av desktop utan leder den digitala utvecklingen. Nu är det snarare desktop som hamnat efter och börjar härma lillebrors designstruktur, tydliga uppdelningar av innehåll, korta textmängder och ökad interaktivitet. Det som en gång var det största hindret är nu den främsta styrkan.

Vill du utforska begränsningars möjligheter rekommenderar jag boken Boxen av Micael Dahlén där man tränas att tänka innanför i stället för utanför boxen.

Forget the fold! Here´s 4 things to focus on instead

THEFOLD

THE FOLD GRAPHIC

The Fold. In web design it’s the point of reference on a webpage that defines what content the viewer can see without having to scroll. It’s a design principle that’s becoming increasingly irrelevant yet clients are often concerned that their audience will only focus on the visible content. And while keeping content “above the fold” does have some validity, attempting to put everything above it can make finely tuned web pages cramped, unclear and difficult for users to grasp. So when this topic starts to become the focus of creative direction, I take the opportunity to point out how today’s technology has changed user behavior and influenced design strategy.

Users scroll

The fold rule had validity before the proliferation of mobile devices. But, with increasing monitor resolutions, frequent smartphone releases and mobile Internet traffic at all-time highs, users have become accustomed to scrolling. Research studies have proved that today’s users scroll and the fold standard isn’t as important as the content you’re presenting. Analytics service, Chartbeat showed that 66 percent of a users focus was spent below the fold on the pages they tested. Another analytics provider, Kissmetrics, found that placing call-to-action buttons below or above the fold had no significant impact on conversion for the pages they tested. There’s even a study that shows “less content above the fold may encourage more exploration below the fold.” So, if designing for a fixed dimension across such a disparate number of screen resolutions is no longer the best approach, what do you do? Focus on good usability and content.

What you should worry about instead

A good introduction. The information at the top of your page should entice the viewer to continue reading further down the page. Pique their curiosity rather than throwing every bit of content at them as quickly as possible.

Your hierarchy. Always prioritize your content and know what you want to communicate first. The most important thought should sit highest on the page but keep in mind that people tend to scan rather than read. Remember, if everything is important then nothing is important.

Usability. Providing clear visual cues, language and navigation is always necessary if you intend to lead customers around your content. Make sure content blocks are easy to digest since dense areas of copy can seem taxing and cause the viewer to lose interest.

Blindly following the rules. There are plenty of design principles out there but every site has it’s own goals and audience. Understanding your visitor’s needs and mindset can often provide better guidance than a general rule of thumb.

The do’s and don’ts of creating intergenerational games

Today we welcome a new writer to the blog: Matylda McIlvenny, art director at Ziggy.

I want my pre-schooler to play video games. Actually, I want to play them too. Which is why a recent Slate article by Annie Murphy Paul piqued my interest. In it, she describes the challenges faced by Mindy Books, the director of education and research at Sesame Workshop, in developing an intergenerational game called Electric Racer. As a designer and parent, I found the research behind the testing of this (and other intergenerational games) compelling. How do you engage both adults and children in educational (and fun) gameplay?

So, here´s a few pieces of advice.

Don’t assume players will figure out how to play

Present a video tutorial or walkthrough before the game begins. Be aware that according to usability expert Jacob Nielsen:

“Many kids behave more like adult users and refuse to read. This reduced willingness to read seems related to experience: the more experience our users had, the less they read.

Keep game interactions and feedback consistent

Adults and children alike adapt to gameplay faster when design patterns are predictable.

Do encourage dialogue

Facilitate “scaffolded” learning through on-screen prompts for adults. Based on Mindy Brooks’ research, adults aid children in learning by “asking questions, providing guidance, helping the child make new connections or draw on past experiences”.

Allow for customization of on-screen features and collaboration on avatar design, keeping in mind that each age group has different expectations of avatar appearance and behavior.

Moreover, joint problem-solving early in the game also encourages collaboration and more successful gameplay.

Do play up each player’s strengths

In intergenerational gameplay, adults provide guidance and encourage patience and self-control. An adult can assist the child in maintaining focus and concentration during specific tasks.

Children can play the role of experts in the use of technology. In addition, because older users such as grandparents may have trouble with techy terms, children can be prompted to assist older players.

Don’t assume one size fits all

Physical and mental limitations are important to consider: allow for longer reaction times for older users, while encouraging faster reaction times for younger users. Through his usability studies, Jacob Nielsen also found the need to distinguish between young (3–5), mid-range (6–8), and older (9–12) children. “Each group has different behaviors and preferences.”