Yatzyblocket, a web app

The Yatzy Pad

I have created my first web app for iPad: Yatzyblocket.se

Go play! Or if you are interested in my process of creating this app, and some  of the thoughts I have about it – stick around.

The idea with Yatzyblocket (The Yatzy Pad) was to create an iPad app to keep Yatzy-scores. There are several Yatzy-apps available already but they all includ the complete game, with dice and everything. All I wanted was the functionality of the actual pad, with some small extra functions to make the game more enjoyable to play. Who likes to play Yatzy alone? There is something to be said about the tactile qualities of real dice. The family game feeling and board game-qualities of Yatzy are lost without them.

all or nothing
Deciding what is automatic (handled by the app) and what is left for the user to do has been one of the harder things. There were two general directions to go as I saw it.

  1. A heavily structured experience with a lot of built in functionality. This could include dice, preventing “cheating” and giving loads of feedback and indicators of progress in the game. This would be a lot more controlled and “game”-like.
  2. A more unstructured experience, more like the one you get while playing real Yatzy. By allowing the user to do with the app what they want, in whatever order they want. This could leave some more wiggle room, for different rules and ways of playing.

My initial idea was to create a native app, but I realized that html5 would be more than enough. The fact that I know nothing about coding native iOS-apps also influenced my decision. The only real argument against making a web app is that the “Add to Homescreen”-interaction lacks all discoverability, elegance and ease of the real app store.

I decided to go with the second approach. The biggest problem with that is in the expectations. I have already gotten reactions like “Look. I could put 1000 into a field”, implying that it is broken. Or “Where are the dice?”.

Of course you can write 1000 with a pencil on a regular pad but that would never occur to anyone. The fact that this is an app on a computing device changes the expectations in some way. Perhaps we have been conditioned to expect apps with as much functionality as possible?

I think that you get used to more open ended tools and appreciate them for what they are once you have gotten to know and experience the limits of what they chose to do. Once your mind has wrapped around all the functionality the limits can be freeing. I figure that reaching this stage, of knowing the ins and outs of the app, will take a lot less time when it is limited in scope. I think that this is the reason why it often feels better to write in text editors rather than bloated Office-software. When the formatting options are not there you focus on the words alone.

building it
This is the first programming project of mine that has relied on javascript. It has been a great learning experience and I have had to not only write, but rewrite, a lot of code. Up until now I have been a bit afraid of using javascript because I thought I din’t know how to program, but now I really enjoy programming with javascript.

As the functionality started to fall into place I focused a lot on ui-performance. I managed to take the whole app from sluggish to well performing by rewriting the CSS. I have not noticed any performance issues on the javascript-end but I am sure there are a lot of improvements possible there.

Specifically I sacrifized text-shadows and several semi-transparent objects that were overlapping as it was heavy for and iPad 2 to render. I can only imagine how horrible it would be on the original iPad. The looks didn’t justify making it slow. I am perhaps overly sensitive to laggy interfaces from my days of playing Quake III Arena. A game where anything below a solid 120 frames per second is unplayable.

My user testing has been limited to playing a lot of Yatzy which has been very helpful. I have often ended a game with 10-15 new notes and ideas for improvements and fixes.

swipe on
I have used some swipe gestures as well. You can swipe left to cross over a field, and swipe right to erase the contents of a field. I think that the interactions work well enough, but the lacking discoverability of these gestures is something I have to adress.

for the future
There are other features that I would like to build too. I am thinking about sound effects. I would like to optimize images for retina screens. I would also like to look into offline caching techniques. It would be useful if you didn’t actually need internet access to be able to use the application. I would also like to bring more life into the application with small animations and other enjoyable ui-improvements.

Anyways. I thought it would be better to just release it and work to maintain and upgrade it over time.


Too many apps?

How the second screen scored in the summer olympics - ReadWriteWeb

The official organizing committee of the London Games released two stand-alone apps, both of which were available on iOS and Android.

NBC, whatever heat its broadest strategy may have generated, developed a handful of apps for tablets and smartphones. Rather than craft a unique second-screen experience, the broadcaster released a trio of apps

Naturally, Sports Illustrated released its own Olympics app.

Reuters and Agence France-Presse (AFP) both put out unique apps to showcase their Olympics coverage.

The Guardian used HTML5 and related technologies to build a browser-based experience that looked and felt like a native tablet app.

That is a lot of disposable apps. What happens after the events? Is everyone expecting accompanied apps with major events?

Cute twitter

Twitter on iOS replaces the status bar to give feedback when you send tweets.

Designing the olympics coverage

Nick Haley, head of UX & design at BBC Future Media, gives an account of designing a cohesive experience across multiple devices for the BBC coverage of the London 2012 Olympics.

The same range of content is also found on mobile, where our approach was not to limit or reduce the content available on that platform, but design pages that were optimised for the mobile context.

Interesting to see that they are not muddling up user intent and device. The content (thousands of pages of different types) is available on all devices instead of limited, stripped down and/or hidden because of some imagined use case of users enjoying the olympics “on the go”.

As well as testing individual products, we were also keen to test cross-product journeys such as from iPlayer to Sport and from the BBC homepage to the Torch Relay site in News.

This sounds interesting indeed. I would love to know more about how these tests were performed. It would also be cool to know what the results of the tests were.

Shaping, structuring and arranging Olympic content for many different contexts and devices was a big challenge but hopefully the end result is an overall experience that feels joined up and cohesive, and most importantly something that you enjoy using.

From the sounds of it the BBC are leading the way in digital coverage of events like the olympics. Look at NBC for comparison.

Cross Media Platform Switching Done Right

A big challenge facing multi-platform service providers is effectively dealing with jumps across devices. Usually providers of services will want the users to be able to use several platforms simultaneously without restrictions. But in some cases usage must be restricted because of copyright and/or licensing. In this scenario it would be easy to end up with interactions that are annoying for the end user. By forcing users out of sessions or punishing them for switching devices multi-platform usage could quickly become frustrating.

Valve’s game distribution service Steam prompts you for a password when you attempt to start it on a second computer. The annoyance is not huge but it adds up over time if you switch computers, like i do between my PC and Mac.

Spotify has a great way of reducing this type of friction when switching devices.

Say you have some music playing in the living room from a computer. If you go outside and start playing something from your phone you will not get a notice that something has happened. It will just play without any error messages or warnings. When you come back to the computer session there is a subtle notice that your other song has been paused. The same goes the other way around.

Whatever input you give overrides any other active session. So if you press play on your phone five seconds later than on a computer the last action will always take precedence. The system is very responsive and it never feels like you are using the service in “the wrong way”. This is a beautiful way of reducing friction of switching between multiple devices when accessing a subscription service.

Major League Soccer Wants to Be First ‘Smart League’

From Mashable

Modern football tactics and preparation is driven by statistics. MLS are looking to establish themselves as the first “smart leage” by creating a digital layer of data that the league can use.

Here’s how it works: Each professional soccer player will carry a small data chip in a protective pocket on the base layer of their jersey. The chip will sit between the shoulder blades.

Thanks to a series of electrodes and sensors embedded into the base layer of the fabric, the chip will be able to wirelessly transport 200 data records per second from each player and route the information to a nearby computer system. That information will not only provide details on performance, but also analysis, and can be easily accessed on a coach’s iPad. (Fans will also have access to the live data).

Opta Sports have been capturing and selling this type of data to European clubs for a while now. The clubs can buy statistics and analysis from Opta and use as a tool for the coaches in assessing the team performances as well as scout opposition teams. MLS would level the playing field by letting all teams get access to the same data.

I am curious to see how they will present the live data to the fans.

Draw something

Just playing around and drawing with shapes and blend modes. I figured that if even Apple are borrowing from the design of Braun then drawing the Braun rt-20 would be a good place to practice my Photoshop chops.

Board game hobby project

I have started to think about making a board game. I think everyone that plays board games find some mechanics that they like and some mechanics that they don’t like. I would like to make a board game full of the stuff that I enjoy from not only board games but also from competitive video games like fighters and strategy games.

My game should be:

  • Simple to learn and have a short rule book
  • Fast to play. I prefer to play several short games than one long game. Long games don’t get the “one more game”-factor and can be exhausting. It is not fun to play out a game that has already been lost (or won)
  • 1v1 and competitive. That means it should not be too random. This is a balancing act however. Random elements are fun for casual gamers and board games are often pretty casual
  • Good looking with a cool metaphor. My initial idea is to give the game a science theme revolving around physics or emission of radioactivity
I really like games that puts constraints on the players so the scope of the game can be instantly grasped, while still requiring skill to master. My next step will be to start paper prototyping and testing some of my ideas in terms of game mechanics.


Seize the Frame design work

I while back I was asked to create a website for the videographers at Seize the Frame. The website has been up for a while and here is a post with some pictures. In this project I designed the visual identity along with a responsive portfolio website. Please check it out in your phones!

TING has concluded

I just watched the winning ceremony from the ting competition over at Nordsken. The winner chose 24 Volt Colas as his prize. Some of the other contestants won Star Wars lego, Munchkin card games and some other small stuff.

All in all there were over 50 registered users that played the game at one point, and there were about 300 scanned items all in all.