STORM GLASS API – MARINE WEATHER DATA FROM MULTIPLE SOURCES

Storm Glass is the only API service providing you global marine weather data from multiple sources in one single API. Get access at stormglass.io !

Stormglass - boat

Coordinates In – Marine Weather Data Out
Send a longitude/latitude coordinate and receive a response containing weather data for that coordinate from multiple weather sources. The Storm Glass API provides data in hourly resolution for up to 7 days ahead.


To get more information please visit www.stormglass.io and to get a free trial or order a subscription – please contact account@stormglass.io


Read more

Vyy – Design and quote outdoor environments!

Människa Maskin has in co-operation with Berg och Landskap created a digital tool for designing and quote services for outdoor environments.

Vyy - Blog image

Berg och Landskap are since a while back using Vyy in their day-to-day operations and the new product is now made available for additional actors within design and maintenance of outdoor environments who want to streamline their offering process as well as increase the quality of their quotes.

 

”Vyy enables our organization to participate in more offering processes and help us win more orders. There was no existing product on the market that could support our needs so we are very pleased to have a digital tool at our hands, tailor-made to optimize the offering process for quotes for outdoor environments. Berg och Landskap is a rapidly growing company and Vyy contributes to our continued strong growth” Says Oskar Berg, CEO and founder of Berg och Landskap.

 

Vyy seamlessly handles the entire process of creating a complete design as well as quotes for outdoor environments such as courtyards, public outdoor environments and private gardens both for refurbishment of existing sites and brand new projects.

 

The layout of the environment is created using intuitive drag-and-drop and draw functions on an existing map of the site. In parallel to the layout being shaped, Vyy is automatically calculating prices and creates a pricing table. This means as soon as the design is completed, the quote – including design, inspirational pictures and pricing table – can be exported as a PDF-file with a single click to be sent to the customer.

 

”We are glad to have been given the opportunity to work with one of Sweden’s fastest growing companies within design and maintenance of outdoor environments. Direct access to experts within the field throughout the process has resulted in an intuitive product that creates value in the users organization from day one.” Comments Pelle Persson, co-founder and developer at Människa Maskin.

 

To get more information about Vyy, book a demo or get access to a free test account please visit www.vyy.se

 

About Människa Maskin
Människa Maskin is a Stockholm based web and app studio creating digital products.

www.manniskamaskin.com
mail@manniskamaskin.com
070-20 32 62 3

 

About Berg och Landskap
Berg & Landskap create and maintain outdoor environments in a sustainable way. We create designs for both brand new as well as existing outdoor environments focusing on making these sites cost efficient to maintain and safe and appealing to visit.

www.berglandskap.se
info@berglandskap.se
0775-333 015

Read more

Prototyping with Origami

Creating a simple prototype that could run on your phone is very effective when it comes to evaluate new app ideas. Doing this with Origami Studio is quite easy. We used this tool to try out our latest idea and want to share some thoughts with you.

origami-frog

The best way of exploring new product ideas is to create some kind of prototype. By spending some time on this you could quickly get a feeling about how the product will (or at least could) turn out.

 

A prototype could be anything from a pile of papers (that is where we usually start our investigation of new ideas) to something fully interactive that you could actually try out on the designated medium for your service.

 

Facebook recently released the first full version of Origami Studio – a tool that is made for the purpose of prototyping applications. On our last design sprint we decided to try it out for the first time to see where it could take us. Here is our findings. (for a deeper understanding, walk through the tutorials on the Origami website)

 

Easy to get started

You do not need more than a few minutes with Origami to create a simple mockup of a mobile application. We started with the iPhone 7 template. Then we added some iOS screens. For each screen we added an image with the right dimensions (750×1334 pixels).

 

By adding some hit areas and interaction patches connected to the present/dismiss properties on the different screens, we had a very simple prototype where you could navigate through the different screens in the application.

origami1

 

Try it out on your phone

After adding the interactions above, it was time to test the prototype on an iPhone. To do so, we needed to download the application Origami Live to the phone and connect it to the computer, then export a runnable version of the prototype to the phone. After that, the phone can be disconnected from the computer and the prototype will stay on the phone. Perfect if you want to demonstrate the application or put it in the hands of some test users!

 

Scrolling with a native feeling

A very common interaction in mobile applications is vertical scrolling. Adding this to an Origami prototype is very easy as well. Start with creating an image of the content you want to scroll through – preferably higher than the screen height of the device you want to run it on. Then click on the touch button on your image object and choose Scroll Y. That is basically it (you might need to adjust the image position a bit).

 

Working with Sketch

If you are creating your design or wireframes in Sketch, it is fairly easy to make your prototype more alive. Copy/paste your content from Sketch right into Origami. Then you can use interaction patches to change the different properties such color, position and size of your objects.

 

Visualised programming

As described in the beginning of this post, it is quite easy to get started with Origami. But prototyping in Origami becomes more and more like some kind of visualised programming the more advanced your prototype gets. Here is an example with a sliding menu.

 

To make a menu slide in from the left by pressing a button, you need to connect an interaction patch to the button object. Then you need to connect the interaction patch to a switch patch. The switch needs to be connected to an animation patch. The animation needs to be connected to a transition patch and the transition needs to be connected to the X position property of the menu object.

 

origami2

This screenshot illustrates that quite much logic needs to be added to create what seems to be a quite simple interaction. Because of this, you might need to have some basic experience in programming. On the other hand – if you have created the interaction once, you could just copy/paste it into where you want to use something similar next time.

 

Prototype a few things at the time

Our first approach was to create a very rich prototype with all the different interactions we could think of. Then we realised that there are a few issues with having too much content in the same project.

 

It felt hard to keep a good structure of all the different patches laid out in the same workspace and eventually Origami started to feel a bit slow. Even though it would be a great experience to have everything in the same demo application on your phone, it might be better to keep the different screens in separate origami files. At least when working with the prototype. Then you could copy/paste everything into the same project when you are finished with the different details.

 

By looking at the different tutorials that the Origami team provides, you get the feeling that the tool is intended to be used in this way where a single origami file just demonstrates one or two features.

Start with what is necessary

If you are creating an early stage prototype of your project, it is wise to not spend too much time on the details. Start with creating the interactions that are absolutely necessary. Then – if you have a lot of time for it – you could try to do the more advanced stuff to enrich the experience.

 

The sky’s the limit when it comes to creating cool animations and interactions in Origami, but you will need some practise. It is quite easy to end up with what looks like a spider web of patches in your workspace.

origami3

 

But this is just the beginning

Origami is getting a lot of new updates at the moment. There are a lot of small things that could be improved and hopefully they will in a near future.

 

Creating a prototype of our latest project idea took around four hours (after a few days of learning the tool) and the result was a quite solid interactive prototype ready for user testing and evaluation. Try Origami next time you want to create a prototype – after all it is free and will give you a lot of value.

 
 
 

Read more

Kill or Keep

How we decide what ideas are worth pursuing and what ideas to leave behind.

kk

We have heaps of ideas for new projects at MM. A luxury but important problem is to know what projects to start investing time and money in, and what projects to kill. To prioritize amongst ideas and to give every idea a fair chance we use a version of Google Ventures Design sprint and the methodology of Design thinking developed at Stanford’s D School and IDEO.

 

Google Ventures came up with the Design Sprint concept to evaluate projects before investing in them. The idea is to get a multidisciplinary team to solve a design problem within a few days. The result and insights from the design sprint are intended to work as a guide to make the right decision whether to proceed or not with the idea.

 

In our team we represent the disciplines of UX, Visual design, Development, Marketing and Business development. This is our take on the Design Sprint which we do in two days. (The original process and methods can be found here: http://www.gv.com/sprint/)

Day 1

1. Understand & Define
Summarize the idea so far. What are the user and business needs that the idea address? What is the target group saying? What is the competition?

 

2. Diverge
Explore many ideas and get inspired by each other. How could the app/web/product look like?

 

A great method for this step is “8 ideas in 5 min” (we believe 4 ideas in 5 min is better). Fold a paper so that it has 4 sections. Ask every participant to draw one idea in each section in 5 min. One section could contain a complete app screen, just one interaction or a certain feature. Explain your ideas to everyone. Repeat once. This is a great way to get inspired by each other and take the idea into new directions. Group the ideas (often you will find that multiple sketches are parts of the same idea).
kk-sketches2
3. Decide
Select the best idea direction by voting.

Day 2

4. Prototype
Continue to work on the chosen idea by creating more detailed wireframes and put them together in the form of a simple prototype that can be tested.

 

Depending on the idea you might want to settle for simple paper wireframes or take it further by creating actual visual design. Make a simple clickable prototype in InVision or get more advanced with Origami or even code a very simple website.

 

5. Validate
Test the idea with users from the target group and potential stakeholders, customers and partners.

 

Obviously what you are presenting here is not a final concept. But you should be able to find out if the users feel that your prototype addresses their need or not at all. Try to find out what they like, dislike, what can be improved and what is missing.

 

Gather the team, go through the findings and vote to keep or kill.

 

Every idea is different

For each of the five steps there are numerous methods to use. Get inspired by Gamestorming, D School and Design Kit. The most important is not to feel stuck with methods that feel like they do not suit the idea you are evaluating. Just make sure that you cover all of the main steps.

 

 

Read more

Människa Maskin Launches Sine !

Sine is the surf forecasting app making sure you never miss out on a glassy day – now available for iPhone and Android.

 

Sine is a surf forecasting app that help surfers worldwide get more quality time in the water without having to spend more time than desired searching for, and interpreting, forecasts.

 

Sine features an easy-to-read surf forecast overview that tells the user within seconds from opening the app if there are good days ahead. For the advanced users detailed forecast data is available for surf spots worldwide.
width-basic

 

Users can also activate Surf Alarms to get notifications when favorable waves, according to their own definition, are rolling in towards their favorite surf spots.

width-push

 

Sine lets surfers add their own Secret Spots in the app to be able to read forecasts and set up Surf Alarms for these spots as well. Secret Spots are only visible for the user who has added them and will never be published to other users.

width-map

Sine is available on the App Store and Google Play. For more information about Sine, please visit surfsine.com

Read more

Need someone who knows UX, Design or Development?

Just a shout out that we can grow your business and brand.

ux

We help you to find out, and how to focus on what’s really important. For us, it is not just about getting your users to complete a task or finding information fast, they should do it with a feeling of delight. Every time that happens, the brand grow stronger along with loyalty, conversion and the business that comes along with it.

 

Have a look at what we are working on at the moment at https://manniskamaskin.com/products/ and do not hesitate to contact us if you need guidance about anything UX, Design or Development at mail@manniskamaskin.com.

 

Read more

SEO, Excel and Chicago Crime Scenes

A number of interesting Excel plugins have popped up lately. In this post I will present a couple of tools and a few examples of what you could use them for.

 

SEO Tools for Excel is a powerful Excel plugin you can use for SEO and Growth Hacks (smart marketing tricks for creating growth with a minimal budget, often by programming). As an example you can find out which backlinks you have to your website (links pointing to your website form other pages) and rank them based on credibility. It might be worth your while to check up the ones with the lowest credibility and make sure they are removed in order to avoid the links lowering your own Google ranking. Niels Bosma, who are developing SEO Tools for Excel, have also connected it with the recently released Google Search Console.

 

An American competitor to SEO Tools for Excel is Blockspring, who has a lot of integrated services and connections to various APIs. As an example please check out the video below which show how easy it is to connect to an open API containing information about crimes conducted in Chicago. They then use Google Maps API to create a heat map showing Chicago crimes over time. In addition they also get information about what the crime scene looked like using yet another API for image recognition.

 

 

Both these tools are in many ways very powerful but there is a catch – not all the APIs out there are available for free. The Blockspring example is only viable for the city of Chicago, no other cities are available in the database. And you should not underestimate the time it takes to learn these tools. It’s a charming and very flexible tool but at the same time it would have been interesting to add a UX- and design-layer to create a more user friendly tool.

 

Read more

Customer Journey Mapping

Customer Journey Mapping is a method for visualizing and mapping the behavior of different target groups as they are using an existing service or are active in an area of interest for a new service. There are number of ways to create at Customer Journey Map, this post will guide you through a version that’s simple yet powerful.

 

The example below is a Customer Journey Map for the target groups “advanced surfers” and “beginners” used in the very beginning when we were exploring the idea of creating a surf app. The objective is to map how the target groups behave when doing activities related to wave surfing. The questions you want to answer are: what’s working well and what is not working so well? What is motivating them and what is creating frustration? From the result you can derive conclusions if there might be a need for new services or products for the target group, or room for enhancing existing services and products.

 

This is the finished Customer Journey Map.customer-journey-mapping-1Step 1: Target Group Analysis
The first thing you need to do is to get to know your primary target groups. This can be achieved by setting up a focus group, do interviews or my personal favorite: contextual interviews where you interview people in the environment where they are performing activities relating to the subject you are currently mapping. Doing the interviews in the right environment often result in high quality input and information about the needs of the users that would remain unsaid in a regular interviews in an office.

 

Write a short summary of each target group, just like you would do when creating a persona. The summary is enhanced over time as you interview more people. In this example we choose to split up the large group surfers into advanced surfers and beginners but you could also have choosed any other criterias depending of what you find interesting and relevant for each project, for example different age groups or other demographics.customer-journey-mapping-2Step 2: Touch Points
Touch points are when the users are interacting with the service/doing activities related to what you are evaluating. Consider what interactions are most interesting for your study and look at the target group analysis to identify which touch points are most relevant for the target group.

customer-journey-mapping-3Step 3: Behavior
For each touch point and target group – write down what they thought was positive, negative or neutral/interesting.

customer-journey-mapping-4Step 4: Paths
Map important and significant paths the target group is taking between the different touch points. In our map, for the target group “beginners”, there is an arrow back to “Monitor forecasts” from “Getting to a spot”. This is illustrating how beginners more often than advanced surfers are going to the beach based on incorrect forecasts (even though experienced surfers also misread the forecasts from time to time).

customer-journey-mapping-5A common mistake is to draw all the possible paths a user might take while using a service. The problem with this approach is that basically any path is possible which makes the map messy making difficult to focus on the most important aspects of the customer journey.

 

Just like a persona is an archetypical user (a fictive representation of the combined characteristics of multiple users within a certain target group) the customer journey should represent the typical path a certain target group would choose.

 

Have a look at my earlier blog post about ExperienceFellow – a smart tool to create a Customer Journey Map.

 

Read more

Hur man gör en enkel Customer Journey Map

Customer Journey Mapping (även kallad kundresa) är en metod för att visualisera och kartlägga olika målgruppers beteende när de använder en befintlig tjänst eller verkar i ett område där din tjänst ska finnas. Det finns många olika sätt att göra en kundresa på. Just denna variant är både enkel och kraftfull.

 

Exemplet som används nedan är en kundresa för målgrupperna avancerade surfare och nybörjare. Målet är att kartlägga hur de beter sig när de utför saker relaterat till surfing. Frågor man vill få svar på är vad som fungerar bra och dåligt, vad motiverar och vad skapar frustration. Utifrån resultatet kan man resonera om det behövs nya tjänster/produkter för dem alternativt förbättringar i existerande tjänster.

 

Så här kan en färdig Customer Journey Map se ut. (Förstoringar nedan).

Customer journey mapping 12

Steg 1: Målgruppsanalys
Det första man måste göra är att lära känna sina viktigaste målgrupper. Detta kan göras genom att hålla en fokusgrupp, utföra intervjuer eller min favorit, kontextuella intervjuer, där man intervjuar personer på plats när de utför något som relaterar till det man kartlägger. Att just vara på plats kan ge mycket bra input och ledtrådar som annars aldrig hade kommit fram i en vanlig intervju.

 

Skriv en kort sammanfattning för varje målgrupp, precis som man gör när man skapar en persona. Denna sammanfattning fylls på efter hand. I detta exempel valde vi skärningen avancerade surfare och nybörjare. Det skulle också kunna vara yngre och äldre surfare eller något annan indelning som man tycker är intressant.

Customer journey mapping 2

Steg 2: Touchpoints
Interaktioner som användarna gör med den tjänst du kartlägger kallas för ”touchpoints”. Fundera på vilka interaktioner som verkar intressanta för undersökningen och gå igenom målgruppsanalysen för att ta reda på de touchpoints som är mest relevanta.

Customer journey mapping 3

Steg 3: Beteende
För varje touchpoint och för varje målgrupp, skriv ned vad de upplevde som positivt, negativt eller neutralt/annat av intresse.

Customer journey mapping 4

Steg 4: Vägar
Rita ut viktiga och framträdande vägar som målgruppen tar mellan olika touchpoints. För målgruppen nybörjare finns det en pil tillbaka till ”Ta reda på prognoser” från ”Åka till en spot”. Detta illustrerar att nybörjare oftare än avancerade surfare åker på prognoser som inte funkar (även om avancerade surfare förstås också missbedömer prognoser ibland).

Customer journey mapping 5

Ett vanligt misstag är att rita ut alla tänkbara vägar som en användare kan ta när de använder en tjänst. Problemet med det är att i princip alla vägar är möjliga vilket gör att det blir rörigt och svårt att fokusera på det viktigaste i kundresan.

 

På samma sätt som en persona är en arketypisk användare (en sammanslagen representation av en hel grupp användare som tillhör en viss målgrupp), ska kundresan vara den typiska vägen som en målgrupp gör.

 

Läs också min tidigare bloggpost om ExperienceFellow som är ett smart digitalt verktyg för att genomföra en CJM.

 

Read more

SEO, Excel och brott i Chicago

Det har börjat dyka upp ett gäng intressanta plugins till Excel. Här tar jag upp ett par olika verktyg och några exempel på vad man kan göra med dem.

 

SEO Tools for Excel är en kraftfull plugin till Excel som man kan använda i SEO-syfte och för att göra Growth Hacks (smarta marknadsföringsknep för att skapa tillväxt med låg budget, ofta genom att använda programmeringskunskaper). Exempelvis kan du ta reda på vilka backlinks du har till din webbplats (länkar som pekar in på din webbplats från andra siter) och ranka dem i ordning av trovärdighet. Det kan vara värt att kolla upp de som har lägst trovärdighet och se till att de tas bort av den som har länkat för att de inte ska sänka din egen Google-rankning. Niels Bosma som utvecklar SEO Tools for Excel har också kopplat ihop det med nyss släppta Google Search Console.

 

En amerikansk konkurrent är Blockspring som har massor av integrerade tjänster och kopplingar till API:er. Kolla exempelvis in denna video där de visar hur man enkelt kopplar in sig på ett öppet API som innehåller brott som har begåtts i Chicago. Sen använder de Google Maps API för att skapa en heatmap som visar brott över tid i staden. Dessutom tar de reda på hur brottsplatsen ser ut genom ett annat API för bildigenkänning.

 

 

Båda dessa verktyg är på många sätt kraftfulla men det finns några hakar. Många API:er kräver att man har en betal-prenumeration för att kunna använda dem. Exemplet med Blockspring går bara att göra med just Chicago, inga andra städer finns i den databasen. Dessutom tar det ett tag att sätta sig in i verktygen. Samtidigt som att det är charmigt och väldigt flexibelt hade det varit kul att lägga på ett lager med UX och design för att skapa ett mer tillgängligt verktyg.

 

Read more

Vi älskar Software as a Service

Tänk vad skönt att kunna använda smarta tjänster som en del av dina egna så att du kan fokusera på att bygga en fantastisk användarupplevelse istället för att återuppfinna hjulet varje gång.

Saas cloud

Nu för tiden är det väl knappast någon som inte vet vad molntjänster är för något. Folk har blivit väldigt bekväma i att låta Dropbox eller iCloud lagra deras dokument och bilder och företag låter gärna Amazon ansvara för driften av deras webbtjänster.

Software as a Service är något folk också kommer i kontakt med dagligen i form av olika tjänster som i princip bara kräver en internetanslutning för att du ska kunna använda dem – som till exempel Facebook eller Google. På sätt och vis har kretsar väl det mesta i hela webbvärlden kring SaaS idag, men det är inte den typen av SaaS de flesta kommer i kontakt med dagligen som vi tänkte lyfta upp med det här inlägget.

Det vi gillar mest med SaaS är alla kraftfulla verktyg som gör det betydligt enklare att lösa komplexa problem som vi ofta springer på när vi utvecklar våra tjänster. Vi vill passa på att tipsa om ett par fantastiska tjänster som vi har kommit i kontakt med på sista tiden – Cloudinary och Chargify.

Slipp allt krångel med bildhantering och lagring så att du kan fokusera på hur bilderna ska visas istället

I en tid där vi inte längre kan förutsätta någonting kring vilken plattform dina användare nyttjar när de använder din tjänst får vi som utvecklare och designers lägga mycket tid och energi på att se till att bilder presenteras på ett optimalt sätt. Tänk vad skönt att då slippa att lägga energi på att skriva kod för att ladda upp bilder, beskära dem, skala dem och själv hantera lagringen för dessa!

Cloudinary är en tjänst där du postar bilder via ett API. Bilden sparas då i deras molntjänst och som respons på ditt anrop får du tillbaka ett ID. När du sedan vill visa en bild anger du i adressen till bildfilen vilka egenskaper bilden ska ha där den ska visas. Om bilden inte redan finns beskuren och skalad efter dina önskemål sker detta när bilden efterfrågas och sparas hos Cloudinary enligt dessa kriterier så att det nästa gång när du frågar efter samma bild går lite snabbare att få tag i samma bild.

Slipp att bygga allt det tråkiga kring en prenumerationstjänst

Att hantera dina kunders personliga betalningsuppgifter är något du helst inte vill ge dig in på. Du vill heller inte skriva logik för att hålla koll på hur mycket en kund ska debiteras, när den ska debiteras eller hur långt det är kvar på deras gratis “prova på”-period. Chargify tar hand om allt det där tråkiga så att du kan fokusera på att fokusera på det som är unikt för din tjänst istället.

Modellera dina produkter via Chargifys GUI. Låt Chargify ta hand om dialogen för kundens betalningsuppgifter och sköta alla mail för betalningspåminnelser och kvittenser. Dessa är enkla att modifiera via Chargifys gränssnitt så att de passar ditt företag. Sedan kan du via deras API skapa upp användare för dina kunder och styra vad de ska betala för.

 

Tjänster som dessa – som löser specifika, komplexa problem och är förhållandevis enkla att integrera – gör verkligen din egen tjänst så mycket kraftfullare och ditt system så mycket enklare att underhålla.

Ta kontakt med oss om ni funderar på att integrera någon typ av SaaS. Vi hjälper er gärna med att hitta lämpliga verktyg och att komma igång med dem.

Read more

Några ord om typsnitt

Här kommer ett inlägg om saker kan vara värt att tänka på när man väljer vilka typsnitt man inkluderar i sin webbdesign och lite riktlinjer för hur man som utvecklare jobbar med typsnitt för att få en så snabb, snygg och smidig upplevelse av siten som möjligt.

fonts

Välj typsnitt med omsorg

Alla designers har sina egna skäl till varför man väljer en viss uppsättning med typsnitt. Ibland är det rent estetiskt, ibland är det funktionellt och ibland kan det vara så enkelt att ett företag redan har en tydlig grafisk profil som man ska följa där typsnitt redan finns specificerat. Här kommer tre punkter som kan vara bra att ha i åtanke när man väljer sitt typsnitt.

Känsla

Först och främst det självklara – vilken känsla vill man att ens site ska förmedla? Vill man sprida skräck och ilska genom att använda allas hatobjekt Comic Sans MS? Vill man att sidan ska kännas stilren och minimalistisk?

Funktion

Kommer sidan innehålla långa stycken text (som man dessutom vill att besökarna ska läsa) är det viktigt med ett att ha ett tydligt typsnitt för dessa texter. Vill man framhäva rubriker ska typsnittet till dessa vara starkt och ha stor kontrast mot det man valt för övriga texter. Förekommer mycket siffror bör typsnitten som väljs ha tydliga sådana.

Filstorlek

Något som designers inte så ofta har i åtanke men som utvecklare tänker på är att typsnitt kan vara ganska tunga att ladda in. Om man prioriterar en snabb sidladdning så bör man åtminstone se till att typsnittsfilerna inte är allt för stora.

 

Less is more

Det finns mer än en anledning till att inte fylla sin sida med för många typsnitt i en massa olika varianter. Att blanda olika typsnitt till samma ändamål kan ge ett spretigt och oseriöst intryck. Därmed kan det vara bra att skriva alla rubriker med samma typsnitt och all brödtext med ett. Men glöm inte bort varianter av din brödtext för kursiv och fetstilt text. Med tanke på filstorlek och hur lång tid det tar att ladda in en sida är det också klokt att hålla sig till så få varianter som möjligt för att hålla ner antal anrop som görs till servern när sidan laddas.

 

Se till att sidan ser bra ut även utan ditt specialtypsnitt

Även om många användare kanske inte gör det så är det faktiskt möjligt att i vissa webbläsare välja att inte rendera specialtypsnitt. Det är heller inte omöjligt att något går snett vid inladdningen av dina typsnittsfiler. Se därför till att definiera en lista på vilka typsnitt som webbläsaren får falla tillbaka till. Här är en länk till vilka typsnitt som finns tillgängliga att använda i de flesta browsers utan att du behöver inkludera några typsnittsfiler. Välj vilka alternativ av dessa som är mest lika dina specialtypsnitt och rangordna dem efter hur du vill att de ska användas.

 

Använd Fontface

När man ska implementera den design man valt finns det lite olika alternativ på hur man får typsnitten att visas på siten. Vissa av dem är baserade på JavaScript som går till en annan server än din egen för att hämta typsnitten och sedan rendera dem. Om du är intresserad av prestanda och snabba sidladdningar – undvik dessa! Behåll kontrollen genom att lägga typsnittsfilerna på din egen server och läs in dem med fontface.

 

Olika webbläsare beter sig på olika sätt

Webbutvecklare får ständigt kämpa med att olika webbläsare beter sig på olika sätt. Så är det också när det gäller typsnittsfiler. Vissa webbläsare kan bara hantera filer av ett visst format. Därför behöver varje typsnitt finnas tillgängligt i fem olika format: SVG, TTF, WOFF och WOFF2.

 

Är du webbutvecklare vet du om att det finns en webbläsare som vi utvecklare älskar att hata då den beter sig lite extra annorlunda jämfört med sina konkurrenter.

 

Webbläsarnas normala beteende är att de laddar ner och läser in det format av typsnittet som den är bäst på att hantera. I Internet Explorer (okej – äldre versioner av Internet explorer – version 6 till 8 – vilka de flesta användare som tur är har tagit sig ifrån) laddas ALLA typsnittsfiler ner och läses in. Konsekvenserna av detta är alltså att Internet Explorer gör fem gånger så många anrop och läser in ungefär fem gånger så mycket data för att kunna rendera dina typsnitt.

 

FontSquirrel

Så hur gör man då ifall man vill använda ett visst typsnitt och bara har fått det i ett enda filformat från sin designer? Man går till FontSquirrel. Detta är ett fantastiskt verktyg där du laddar upp din typsnittsfil och får tillbaka den i alla de format som du behöver. Allt laddas ner i en ZIP-fil som innehåller dokumentation och exempel på hur du ska använda just dina filer.

 

Benämn typsnitten efter hur de är tänkt att användas

Det exempel på CSS som du får från FontSquirrel innehåller en liten egenhet som man bör rätta till dock. Säg att du laddar upp en fil till FontSquirrel med normal vikt av typsnittet Open Sans och att typsnittsfilen heter “OpenSansNormal”. I det exempel som FontSquirrel genererar kommer din fontface-css definiera din font-family som “OpenSansNormal” med font-weight satt till normal. Om du sedan laddar upp en fil som heter “OpenSansItalicBold” som innehåller en kursiv, fetstilt variant av samma typsnitt så kommer FontSquirrel sätta font-family till “OpenSansItalicBold” och font-weight till normal. Ändra för tydlighetens skull om denna kod så att font-family i bägge typsnittsdefinitioner är satt till “Open Sans”. I det senare fallet, sätt font-weight till bold och font-style till italic.

 

Försök inte använda en vikt av ett typsnitt som du inte har definierat

I ett projekt för några år sedan var jag väldigt konfunderad kring varför ett visst typsnitt såg okej ut i Chrome för OSX, men inte i någon annan webbläsare. I det projektet använde jag siffror för att bestämma vilken vikt ett typsnitt skulle ha i en viss h-tagg. Det visade sig att jag försökte använda en vikt som jag inte hade definierat, vilket lämnade det upp till webbläsaren att försöka tolka vad jag menade. I min standardwebbläsare såg det bra ut, men i alla andra dök det upp diverse konstigheter.

 

Optimera till max

Jag har tjatat lite om att optimera för snabba sidladdningar ovan. Det kommer komma fler blogginlägg på det temat och vikten av det längre fram. Men nu när vi pratar om just typsnitt finns det ett par grejer till man kan göra om man vill jaga bytes i filstorlek och minska antal anrop.

 

Genom att välja en Base64-kodad version av de olika typsnittsformaten kan man inkludera koden för vissa av dem i sin CSS. På så vis garanterar man att CSS-filen och typsnittet läses in samtidigt och man slipper ett anrop till servern.

 

Är man säker på att man inte kommer använda alla tecken som finns tillgängliga i originaluppsättningen av typsnittet kan man välja att exkludera de tecken man inte är intresserad av. Ifall du väljer att göra detta – var noggrann med att dokumentera vilka tecken du valt att plocka bort. Annars finns det risk för att andra konstiga tecken uppstår på din site när webbläsaren försöker hitta substitut för vad som saknas i din typsnittsfil och ingen begriper vad de kommer ifrån.

 

Det var några av mina lärdomar och tankar kring området typsnitt. Hör gärna av er om ni inte delar mina åsikter, tycker att jag har missat något väsentligt eller har några frågor.

 

PELLE

Read more

Nytt verktyg för Customer Journey Mapping

Ett nytt verktyg för att utföra metoden Customer Journey Mapping har släppts och det kallas för Experience Fellow!

customer journey mapping with experience fellow

Själva metoden Customer Journey Mapping eller ”kartläggning av kundresa” som en del kallar det på svenska handlar om att kartlägga hur en viss målgrupp beter sig när de använder en tjänst/produkt eller löser ett problem. Det skulle exempelvis kunna vara att ett tågföretag som vill ta reda på hur en tågresa upplevs av målgruppen affärsresenärer. Lyckas man kartlägga deras kundresa med allt från att leta upp rätt biljettyp, hitta information om avgångar, vidare till själva tågresan med byten och köp av fika så kan man upptäcka vad som fungerar bra och när målgruppen upplever problem eller frustration.

 

Med en sådan kartläggning får man underlag om vart man ska sätta in resurser och göra förbättringar och hur. Eftersom alla delar spelar in i användarnas helhetsintryck kan en isolerad del som skapar frustration (även om allt annat flyter på bra) skapa en missnöjd kund varpå varumärket tar skada.

 

Mycket handlar om att höja blicken och se helheten. Inte sällan upptäcker man att vad man först trodde var en förbättring för ett problemområde ändå inte löser själva kärnan i problemet. För att kunna ta reda på hur användare verkligen upplever en produkt eller ett flöde och hitta dessa problemkärnor kan man alltså använda sig av verktyg som Experience Fellow.

 

Så här använder man Experience Fellow
Man börjar med att skapa ett projekt i Experience Fellow:s webbverktyg och sedan skickar man ut en inbjudan till deltagarna som tillhör en viss målgrupp. Dessa får instruktioner om att ladda ner en mobilapp där de matar in information om sina upplevelser under tiden som de använder tjänsten/produkten.

step1

En inmatning ska ske direkt efter att de har gjort något som relaterar till tjänsten, till exempel leta efter en tågbiljett på tågföretagets webbplats, boka resan, ringa kundtjänst för att byta till en tyst vagn och så vidare. Dessa interaktioner kallas för touchpoints.

step2

Vid varje sådan touchpoint ges ett poäng på hur det upplevdes, dessutom kan man välja att skriva en anteckning eller skapa en röstinspelning. Dessa inmatningar sätts sedan samman i Experience Fellow:s analysverktyg och när tillräckligt många deltagare börjar mata in sina upplevelser så börjar man kunna urskilja mönster.

step3

Intressant är också att lägga ihop resultat från olika typer av målgrupper och se om de har några gemensamma problemområden. Då är det verkligen dags att göra någonting åt det. Testa verktyget på http://www.experiencefellow.com/

Read more

Att vara social på rätt sätt

För ett par veckor sedan fick jag möjligheten att gå på An Event Apart i San Francisco. En av de mest intressanta föreläsningarna hölls av Sarah Parmenter och handlade om vad företag har för nytta av sociala medier och hur dessa kanaler bör användas för att kommunicera med sina kunder. Denna föreläsning bekräftade många av de tankar som jag själv haft under mina år som webbutvecklare och jag tänkte dela med mig av några av dessa.

 

att-vara-social-pa-ratt-satt

Det är onekligen så att de flesta företag vill finnas i den sociala mediarymden. Speciellt sedan Facebook slog igenom. Det finns ju tillochmed en uppsjö av företag som kallar sig för ”sociala mediabyråer” – som bara fokuserar på att hjälpa andra företag med social media.

Jag tror att det är viktigt som företag att ställa sig från hur man faktiskt får ut mest nytta av sin närvaro på webben. Alla företag kanske inte ska finnas överallt, på alla tänkbara sätt.

Allt på Internet behöver inte ha ”sociala dela-knappar”

Ni kan säkert hitta många och bättre skräckexempel på webbsidor där ”dela”-knappar har smugit sig in och ju mer man börjar titta efter det – ju mindre förstår man sig på deras funktion.

Hur många använder egentligen Pinterest till att spara bilder på en snöslunga från Jula? Eller för den delen, vem delar samma snöslunga till sina vänners flöden på Facebook? Om du inte jobbar på Jula – ställ dig frågan hur gärna du vill se produktinformation kring snöslungor i ditt flöde?

Däremot borde det vara självklart att man som företag – och framförallt som webbutvecklare – inte gör det onödigt svårt för sina kunder att dela en snöslunga på Facebook. On det nu finns någon kund som trots allt skulle vilja göra detta. Även om du har insett att du kanske inte bör ha dela-knappar på precis allt, så se till att du använder en semantiskt trevlig HTML-markup och få med rätt Meta-taggar.

Antal följare säger ingenting om hur mycket pengar du kan tjäna

Parmenter nämnde på sin föreläsning att ”conversion rate” för twitter-följare är 0.04%. Om Twitter vore den enda kanalen du hade för att sälja dina produkter skulle detta innebära att det krävs 2500 följare för att få sälja en enda produkt. Det är inte helt lätt att få så många följare på Twitter.

Just Twitter kan liknas vid en stor arena fylld med folk där alla besökare har fått varsin megafon som de skriker i samtidigt. Då blir det väldigt svårt att få folk att höra vad man har att säga i allt detta oljud.

Det är inte så att alla dina följare är engagerade i det du skriver om – oavsett vilket medie du använder. Enligt Parmenter är det ungefär en fjärdedel av dina följare som faktiskt läser något av det du skriver.

Fundera på vad du kan ha för nytta av många följare och många likes. Det kan säkert vara ett bra sätt att få bekräftelse på. Det kan också bli väldigt intressant om man analyserar vad det är för människor som faktiskt följer dig på twitter eller gillar dina bilder på Facebook. Men ta inte för givet att många likes eller följare är ekvivalent med att du tjänar mycket pengar.

Olika användningsområden

Sociala medier kan givetvis användas till mer än en typ av kommunikation. Här följer några vanliga exempel.

Nyhetspublicering
Se till att nyheter sprids och når så många kunder som möjligt.

Inspiration
Folk älskar snygga bilder på heminredning och kläder.

Support
Använd Twitter eller Facebook som support-kanal åt era kunder. Varför inte se till att finnas tillgänglig för snabb återkoppling på det medie där kunderna redan finns?

Uppföljning
Se vad folk skriver om ert företag efter en nyhetspublicering eller en reklamkampanj. Har man en företagssida på Facebook kan man dra nytta av deras verktyg för Insights. På Twitter kan det vara intressant att söka efter vad folk skriver om bolaget och inte bara till bolaget.

Fundera över vilket användningsområde som passar ditt bolag bäst och utforma ert arbete med social media därefter.

Använd rätt media för rätt budskap

Jag skrev tidigare att alla företag kanske inte passar in på alla olika medier. Alla typer av budskap passar kanske inte heller in på alla medier. Ibland av tekniska orsaker – man kan inte skriva långa texter på Twitter – och ibland av den enkla anledningen att det inte är så en vanlig användare nyttjar en viss plattform. Normalt sätt läser man inte långa texter på Instagram eller Pinterest. Och vad är det för mening att följa ert företag på en viss kanal när man redan har fått exakt samma budskap via en annan? Här kommer en kort sammanfattning kring hur man kan nyttja olika kanaler.

Instagram
En lite mer personlig kanal. Folk vill se amatörmässiga – men snygga – bilder tagna med mobiltelefoner. Att följa någon på Instagram är lite som att få läsa någons dagbok. Om det bara dyker upp snygga proffsfotografier med ett väldigt säljande budskap tröttnar folk snabbt. Använd Instagram för att posta ”behind the scenes”-material eller för att visa hur en vanlig dag på ert företag är. Ett bra sätt att visa att ni också är människor helt enkelt.

Pinterest
Används nästan uteslutande för snygga och inspirerande bilder. Säljer ni en produkt kanske folk vill ”pinna” snygga miljöbilder med era produkter i? Folk som använder Pinterest för att spara snygga bilder lyckas förhoppningsvis göra detta oavsett ifall ni har en ”dela”-knapp eller inte. Det finns även en Extension till Chrome som hjälper en att  pinna från vilken sida som helst.

Twitter
Korta budskap och snabb respons, men även fullt med brus. Har ni kunder som är aktiva på twitter bör ni finnas där och vara lika aktiva. Men antalet följare på Twitter behöver tyvärr inte säga någonting alls kring hur bra det går för ert företag.

Facebook
Den största kanalen som går att använda till det mesta. Används både för professionella och personliga budskap, men kanske inte lika personligt som Instagram.

Blogg
En vanlig blogg går givetvis att utforma lite hur man vill. Kallar man det för blogg borde det kanske vara lite personligare än ett vanligt nyhetsflöde. Att ha en blogg kan hu vara ett utmärkt sätt att driva folk till företagets webbsida om inte annat.

Tänk på att de kanaler man väljer att finnas på också sänder ett visst budskap – att inte finnas på den kanal där era kunder finns kan vara farligt. Fokusera inte så mycket på Twitter om alla era kunder finns på Instagram etc.

Visa hängivenhet genom kontinuitet

Det absolut viktigaste måste var att ni som företag visar hängivenhet genom att kännas närvarande och äkta.

Prioritera de medier som passar er verksamhet och ert företags profil bäst. Vill ni ha många följare på Instagram – posta helst ett inlägg varje dag. Vill ni att folk ska läsa er blogg – skriv kontinuerligt, skapa innehåll med kvalitet och skriv om sådant som folk vill läsa om!

PELLE

Read more