Archives for April 2017

April 30, 2017 - No Comments!

Fun with Mapbox

I’ve been playing around with Mapbox (free). It’s a mapping platform that lets you build experiences in an app or site. You can link up to APIs, do fancy coding stuff with it, including data overlays and analysis. The Mapbox Studio, where you do your work and setup, takes a little time to get to know, but there’s enough info out there to get you started, including a Getting Started resource page.

The pro move is to enlist someone who knows javascript to help you take the full potential of the platform. Or learn a little js yourself.

Step 1: Style map in Mapbox Studio

mapbox_map

 

Step 2: Code until you cry. This is a basic zoom in fly in from a full globe map to a specific location.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.fly {
display: block;
position: fixed;
margin: 0px auto;
width: 50%;
height: 40px;
padding:10px;
top: 20px;
left: 20px;
}
</style>
<div id='map'></div>
<div class="fly">
<img src="believe100%25gold.png">
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXJlaXQiLCJhIjoiY2l6OHEyZ2V5MDAxdDMzcW91ODRrMDl4biJ9.7ojFi6EbEIpatAkrYew55w';
/*
var start = [-122.32, 47.61];
var end = [-157.5, 84.47];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ereit/ciz8q4d9800202ro0b41ud90t',
center: start,
zoom: 9
});

var isAtStart = true;

var travel = function () {
// depending on whether we're currently at point a or b, aim for
// point a or b
var target = isAtStart ? end : start;

// and now we're at the opposite point
isAtStart = !isAtStart;

map.flyTo({
// These options control the ending camera position: centered at
// the target, at zoom level 9, and north up.
center: target,
zoom: 9,
bearing: 0,

// These options control the flight curve, making it move
// slowly and zoom out almost completely before starting
// to pan.
speed: 0.2, // make the flying slow
curve: 1, // change the speed at which it zooms out

// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function (t) {
return t;
}
});
};

travel();

var timerId = setInterval(function () {
if (map.isMoving() === false) {
travel();
}
}, 250);
*/

var start = 1;
var end = 17;
var seattle = [-122.3216, 47.6163];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ereit/ciz8q4d9800202ro0b41ud90t',
center: seattle,
zoom: start
});

var isAtStart = true;

var travel = function () {
// depending on whether we're currently at point a or b, aim for
// point a or b
var target = isAtStart ? end : start;

// and now we're at the opposite point
isAtStart = !isAtStart;

//map.setCenter(seattle);

map.zoomTo(
target,
{
duration: 20000,
center: seattle
}
);
};

travel();

var timerId = setInterval(function () {
if (map.isMoving() === false) {
travel();
}
}, 250);
</script>

</body>
</html>

 

 

April 30, 2017 - No Comments!

Voice user interface design

I wanted to share some resources I've found useful for my projects.

Google Actions has a great overview of VUI design. The videos are a good starting point.

Alexa Skills Kit Voice Design Best Practices

Skeuomorphism in voice interface design (for now)

 

Main takeaways and things to keep in mind:

1. Uncanny valley 

The more something sounds like a human, the more we perceive it as a weird or off human and feel uneasy.

2. Succinctness

There’s only so much we can ingest from a response. A visual list of information we can go back and forth to is easier than trying to remember what we heard. We tire out trying to remember exactly what was said.

3. Recognition verses recall 

What people can respond with should be easily available for recall. Don’t put the cognitive load on people by making them remember too many things, 3 things max.

4. Task-focused interactions

It’s better to have people focus on simple requests and tasks and be explicit about what can be done. Information exploration that’s possible in visual interfaces doesn’t translate as well to voice. The assistant needs to be clear about what function it's performing.

5. Complementary visual interfaces

Visual additions are great for extra information that wouldn’t be easily absorbed from a voice response.

6. Accessibility

Success depends on the device being able to work with differing speech patterns, high pitched and low voices, accents and speech impairments, soft voices and loud voices, etc.

7. Feedback

The system should be transparent about its status and errors and what we can do to get unstuck.