Mobile website make-over, reconsidering

After a discussion with Thomas earlier today about the pros and cons of responsive web design, and the possibilities of implementing my mocked-up layout from last week in merely a CSS redistribution of content, I've decided to keep my current website, but make a lot of smaller tweaks. To quote myself from last week:

I've divided up my initial critique into three points:
1) There's too much vertical scrolling going on. The first view just contains an image of me until scrolling down. The situation is even worse with some of the subsections, with Where's Malibu standing out as especially aggregeous. The image resolutions and layout, together with the large amount of text about each project, definitely lead to a sub-par experience.
2) The menu situation is not very good for visitors not familiar with my projects (and who really is except me?). Why would anyone consider visiting any of the links? This shows that just making separate CSS for mobile does not get the job done, as you can't explore in the same way. The user cost of clicking the "wrong" item in the list is huge (in the form of a bunch of vertical scrolling, or taking a chance on another menu item).
3) A common problem across platforms is the lack of visible and understandable contact information.

Considering it, I realized that the amount of vertical scrolling was probably too much on my desktop version of the site as well. The amount of text for each project has now been severely shortened, and images have been replaced or resized to make the website a lot "shorter" on both platforms. This should alleviate some of the problems under bullet point #1.

For #3 I decided to add a standard footer to the website, in both versions, which now contains all relevant contact info, whereas before it was mashed up into the "About Me" segment.

As for #2, I think it still is the weakest point. However, with the shorter format the cost of clicking the wrong item is reduced, and the urge to use the menu at all should be reduced as it' should be fairly easy to scroll through the site.

Mobile website make-over, part 2

Work on my mobile website continued today, with a number of layout sketches. The main goal here is to minimize vertical scrolling while not introducing a series of clicks (slideshow-style).

After about ten different concept sketches, tested on Thomas, I decided move on of the concepts on to the phone instead, in the form of a .png mid-fi prototype:

I'm not certain about this layout, as there might be too much going on, with the text overlaying images. It'll be interesting to get some more input on it though, as it makes for a compact layout.

One of the more difficult things is to determine how a elegant solution for switching between mobile and desktop versions can be done - along with the best way to display what is the current view.

The Larmen.com Guide to Italian Coffee - work continues

After listening to people who have used the Coffee Guide I decided to make a few changes. In a regular process this would of course have been tested in-house, before the application was uploaded to Google Play. When I run into a friend or acquaintance it's easier to just direct them to the Google Play store though, so it very much encourages spontaneous user studies.

One major point of user complaint was that the view is erratic in where it places the headline of the coffee type in relation to the content. Often times, the headline (coffee type, e.g. Cappuccino) gets hidden above the screen, and you get transported to the middle of the content instead. This seems to be due to the operating system not knowing the size of a particular view before scrolling to it. I've tried to remedy this by using the built-in system method smoothScrollTo(), and sending it to the headlines position in the view. This did unfortunately help in any significant way, so I'm going to call in support from a friend on this issue.

 The initial view. Clicking on Cappuccino sends me to the view below.

 The headline and content are both visible. Scrolling down a bit and clicking on the item Caffè Latte gets the below view.

The headline of the coffee type is not visible.

Secondly, it turns out that the colors in the image are not as clear on the devices as I would have hoped when creating the assets. The blue color we chose for water for instance is too bright, and kind of melds together with the cup color. The same thing goes for the different shades of milky white.

What I wanted to achieve with the application was a navigational flow where the user would feel encouraged to explore the different alternatives. This goal has only partly been achieved, I think partly due to the issues mentioned above.

Mobile website make-over

Over the last few days I've been reading Mobile Usability, by Nielsen and Budiu. This has led me to finally get kicking with a mobile redesign of my site. When I first designed it, I wanted to have a quick-and-dirty site, aimed mainly toward visitors on desktop computers. The mobile website was, as in many other cases, an afterthought, which is painfully evident.

My website on an iPhone 4S

I've divided up my initial critique into three points:

1) There's too much vertical scrolling going on. The first view just contains an image of me until scrolling down. The situation is even worse with some of the subsections, with Where's Malibu standing out as especially aggregeous. The image resolutions and layout, together with the large amount of text about each project, definitely lead to a sub-par experience.

2) The menu situation is not very good for visitors not familiar with my projects (and who really is except me?). Why would anyone consider visiting any of the links? This shows that just making separate CSS for mobile does not get the job done, as you can't explore in the same way. The user cost of clicking the "wrong" item in the list is huge (in the form of a bunch of vertical scrolling, or taking a chance on another menu item).

3) A common problem across platforms is the lack of visible and understandable contact information.

Follow the progress of the project here, or straight on the website itself from your mobile device.

The Larmen.com Guide to Italian Coffee, version 1.1 - It's LIVE!

As the headline indicates, we're live with version 1.1. Please check it out via http://play.google.com/store/apps/details?id=com.larmen.coffeeguide!

The Larmen.com Guide to Italian Coffee, version 1.1

(UPDATE) Version 1.0 is now live on the Google Play store, via this link: https://play.google.com/store/apps/details?id=com.larmen.coffeeguide

After digging around the Google Play store, I hope that changing some details in there will make version 1.0 show up later today. If you're anxious, search the store for Larmendotcom, and it should show up together with our other application Where's Malibu. I'll update the post here when the app is up in the store.

In the meantime I've managed to do some user testing and found some valuable pieces of feedback. One thing that I noticed was that, as I've mentioned before, the starting page didn't work at all. Since I didn't want to replace that with placeholder content, I instead reworked the navigational structure. The view now consists of a list with clikable items. When an item is clicked, the item expands to reveal the content beneath. The whole area is then clickable to close the item again, or you can just click on another item to open that, and close the former (a behavior that seemed expected in my tests).

Alternative color scheme test. This was experienced as less legible, and is in my opinion not as elegant.

The old colour scheme, but with the new layout. Feedback from the tests indicate that perhaps a loading screen or something would feel in place the first time you run the application, as the information was experienced as very "in your face", and a bit overwhelming.

The same layout on a 1920x1080 screen. Following the rythm guidelines in Android, the elements will appear the same size (48dp) on all different screen densities and sizes.

This new version (version 1.1) is downloadable from here! Just as last time, the easiest way to install is to click the link on your phone (make sure you allow for installation from Unknown sources in your phone Settings). If you have any trouble, please let me know at http://twitter.com/larmendotcom. If you've tested any of the versions, please send feedback as well via Twitter!

The Larmen.com Italian Coffee Guide, further updates

No news about the Google Play situation, so I'll just keep posting updates here instead.
Some smaller adjustments made since last time: the typeface for the coffee descriptions was adjusted, a divider line was added to make the detailed coffee view more coherent, and everything was put inside of a scrollview. I was also experimenting with a frame around the descriptive text, which didn't work out at all. The final result is screenshot at the bottom below. I believe that the text body continuing below the screen edge should be enough to indicate the scrollable nature of the view.

Ideally I'd like to have another version of the application developed and testable before deciding which one gets to be the "final" one, with the navigational structure mentioned in my last blog post. To get there I have tested to different approaches, each with their own set of drawbacks: the first idea was to utilize the built-in ExpandableListView class in Android, and have each Header (coffe type) item have one child (their descriptive text). Since that setup is built more for a categorizing I came into some complications, which led me to the second approach of dynamically hiding and showing content in a regular ListView.
More to come on that..!

The Larmen.com Italian Coffee Guide, Google Play update

For some reason the application is not up on the Google Play market yet, despite it being set to status "Published" in the developer console. In the meantime you can download it from my Dropbox via this link. The easiest way to install the app is to enable "Install from unknown sources" in your phone's settings, and then visiting the aformentioned link via your phone. Alternatively you can of course message the link to your phone via the messaging service of your choice. Nerds like me will just push it via adb shell :)

On a more positive note, I today had the chance to perform some observation of first-time users of the app. One thing that's apparent is that it is not at all clear enough that the starting screen coffee cups are just there for illustrative purposes. This leads to maybe 15-20 seconds of pointless tapping on the screen before heading up to the upper left corner to get to the menu. This will be the first thing in the order of business for the next version.
As I see it I now have some alternatives, in the order of time commitment from quickest to slowest:
a) Make the coffee cups to links to actual content (creating a number of other problems)
b) Re-design static starting page to more clearly indicate that it's not interactive (waste of space perhaps?)
c) Displaying something else on there (my original plan was to perhaps have photos or interviews, etc.)
d) Redesign the whole navigational structure (which I'm not very happy with), and design something that makes sense in just ONE layout, something I practiced while sketching a media player for an internship application (see below)

Testing and reworking will continue throughout the coming week, keep your eyes peeled!

The Larmen.com Italian Coffee Guide, part 4

Today was spent in crunch mode together with Filip, and it certainly payed off in the end: The Larmen.com Guide to Italian Coffee is now uploaded to the Google Play Store! It should be up in a few more hours, and I'll update this post with the link as soon as I can see that it's live.

We still have a long //TODO-list, and a potential navigational re-design in the works, so stay tuned!

The Larmen.com Italian Coffee Guide, part 3

Today work continued with another pass at asset management for the Coffee Guide-application. Inspired by a talk by TAT founder Hampus Jakobsson, who encouraged us to "release, release, release" I've decided to get a working version up on Google Play, before possibly developing and expanding the application.

This is mainly a way to get user feedback. Although late in the process, I hope to get as much constructive feedback as possible. I do realize that getting user feedback this late in the process requires special tools - during my thesis we tested two differing mixed-fi prototypes, and tried to get feedback via comparison. I think I'll go for a similar approach with the Coffee Guide. This also seems to be the most common case in the industry, where most software is iterated upon, not created from scratch.

As per usual, the differing screen sizes and densities prove to be a hassle on Android. Luckily Filip once more jumped in to provide assistance with asset creation, and also whipped up a nifty Photoshop script to down-scale in steps from the largest xxdpi bucket and going lower. As the image indicates I had some emulator fun, testing all the fresh assets.

My ambition is to get the app ready for the Career Days-expo here in Malmö on Friday the 18th of October. Something to show off has to better than nothing, don't you think?

Ball Game, game design part 5

Ball Game (previously known as Prince) is still underway. After playing an unhealthy amount of Peggle, and becoming infatuated with the slow-motion effect when you're close to hit the last orange peg, we decided to implement something similar into Ball Game.
Three more levels were tweaked and added today, and one of the old levels was replaced (it was too similar to another one). We've started to come across larger and larger design challenges when it comes to timing in the levels, so next thing on the to-do list is a permanently displaying trajectory tool, so that we can figure out if the levels ar beatable or not without doing a huge amount of math.

As always, click on the image to play (via my website)!

The Larmen.com Italian Coffee Guide, part 2

Squeezed in some Android fiddling during lunch, and managed to figure out what the layout problems were all about yesterday: if you have an image where the resolution is wider than the screen, it will (for some reason) fill up the whole parent container. Or at least it seems that way. My problems disappeared when shrinking the .png-file to the correct size for my HDPI screen.

I'll keep you posted on further progress (as usual)!

Bollspel, game design part 4

Another day, another line of code!

Today Thomas and I introduced moving objects into the world of the bouncing ball. This requires a larger sense of timing when you play, and we feel that it's a nice addition.
As usual we've spread the link around to as many people as possible to get feedback, on Twitter, Facebook, mouth to mouth, etc, and we sure would appreciate yours!

We've unfortunately just had a few testing sessions where we've actually been able to observe people playing. Despite the low number, we feel that one important part of feedback that came out of that was that people want to be able to measure their progress in some way. We've sketched a few different scenarios, introducing a bounce counter, reset counter, timed levels, etc., and ended up with a reset counter. We are very interested to see what kind of different player behavior this elicits (we've already started seeing changes in our own play styles).

For another take on today's work, please check out Thomas tumblr here!

The Larmen.com Italian Coffee Guide, introduction

Since the decision to move to a more personal format with the coffee application, I've done som write-ups on the most important coffee types in my opinion. I want to user test the application with side menu navigation before doing any bigger changes, but it seems to me that I might have to go back to the drawing board. There are just too many different types of coffee :) This clutters the menu with a bunch of alternatives all starting with the word Caffè.
In addition to this I'd like a space in the app that maybe in the future can contain some other type of content, like images, reviews, etc.

Work has now been stalled, since I've come across a weird layouting problem in the xml-layout for the fragment that displays the information about the different types of coffee. When moving a ImageView to the top of a vertical linear layout, it takes up the whole screen, instead of using it's assigned property "wrap_content".

When placed at the bottom of the screen, it works just as it should, with first the headline's TextView, then the description's TextView, and then the ImageView (all with layout_height = "wrap_content").

Luckily I've enlisted the help of friend Filip Ivansson to help out with the illustrations for the content. He's now created the base shape for the three different sizes of cups that should cover almost all of the common types we want to add to the app. His work with the espresso can be seen in the photos above.

PS. I'm sorry about the layout of images on this blog, I'm not sure what's up with Blogger's image import settings.

Bollspel, game design part 3

With Thomas back from his mini-vaction in Poland, work continued on the game.
Brainstorming is not my favorite idea-generation method, but we did some of that on our own, and combined our ideas with the feedback received from a bunch of Facebook comments I received when I put the link up on there.
After a bunch of papers scribbled full with ideas, we decided that the next set of levels will incorporate moving obstacles. We're trying to introduce game mechanics one at a time, and want timing to be a larger part of the play experience.

I've always found paper prototypes of digital games to be a bit unreliable in what they can tell you about an idea, since games often rely on things like different physics, control input, and feel. Having quick engines like Construct 2 in some ways also alleviate the need for paper prototyping since mocking something up is so quick and easy.

We are now done with nine levels in magenta, and nine levels in orange, with the ambition to continue this pattern of nine levels for each new world we design. Please play and leave feedback on Twitter here.

Click screenshot to go to the latest version of the game.

The Hipster's Guide to Italian Coffee - follow up

After one and a half day of working with the coffee guide I realized that I had to always fight an urge to editorialize the content in the application. Instead of fighting it I've now decided to give up, and instead of doing a regular coffee guide, I want the content in the application to be more from my perspective. This also lead to a reconceptualizing of the application to perhaps not only include different types of coffee, but also reviews, interviews with people working in the coffee business, etc.

Apparently this project will now become a bit larger than I initially envisioned, however this new direction actually feels something I'm a lot more passionate about. I'll keep you posted!