News for the ‘Design’ Category

Introducing: Parse Browser for iOS

Ever since I signed up for Parse.com and started using it as my BaaS-provider, my app development has sped up significantly.

Needless to say, there are a lot of things I love about the service. The user-friendly API, the generous free limits and the schema-less db model to mention a few.

However, there’s one thing that has always bugged me. I’m usually on the go, and I like when I have my tools available from the comfort of my iPhone, when I need them. The Data Browser view that shows and lets you manage your classes and objects does not work from mobile Safari. Neither is there an app from Parse themselves to support this.

So I built one.

I call it “Data Browser for Parse”, and I’d like to show it to you:

This app lets you add your own apps from the Parse Dashboard that you want to manage, with your own name and keys, as given in the Parse Dashboard. And don’t worry, as I use this myself, and I’m pretty paranoid when it comes to giving out my personal keys and stuff, I made sure the keys are securely stored in the iOS keychain as recommended by Apple.

After adding the app info, and selecting which one to work with, it’s just a matter of adding the relevant classes to manage. The Parse iOS SDK isn’t really built, I guess, to extract user info about a user’s apps and classes, it’s pretty limited in that you have to know the name of the class you want to work with, so for the time being, this has to be set manually. It’s not too difficult, though :)

After adding your first class, you might find that the “name” shown in the list isn’t really what you would have chosen as an identifier for your objects. Hey, no ones data looks the same, so I figured it would be best to make this configurable. So, in the navigation bar, there’s a button where you can select which of your class columns you wish to use as a “title” column for you objects. As you can see in my screenshots above, I have a list of “Questions” where the “answer” column is what I use to know which object is which. (And as a last resort, I included the objectId in case you have a lot of objects with the same name)

Now, the fun begins. Use the app to browse around your data, tap a field to edit it, modify your arrays and objects, or go ahead and add a new column to your class!

The rest is up to you!

PS. The app is currently in the App Store Review line, but be sure to keep an eye out on this page or on my twitter when it gets approved!

EDIT: The App is now live and kicking in the App Store! Get it here

Posted: April 6th, 2014
Categories: Design, Mobile
Tags:
Comments: Comments.

Misleading icons: The funnel

One day we all just have to wake up and smell the reality: when it comes to choosing a default icon to depict a filtering function, we’ve all been duped by a funnel. (Or is it a martini glass?)

There is no question about it, the funnel is indeed the default icon of choice for most when it comes to the filter function. (See for yourself!)

The question is why? Why did the funnel earn this prime spot? I’ve been thinking about this for a while now, and all I can come up with is: I don’t know!

What is a filter?

First, let’s define what a filter is and does. A filter function takes in a large amount of data and after applying a set of rules excludes a part of the data, resulting in a smaller dataset than the original. (Or as Wikipedia defines it: “a higher-order function that processes a data structure (typically a list) in some order to produce a new data structure containing exactly those elements of the original data structure for which a given predicate returns the boolean value true”)

Basically, we have a list of some sort to begin with. The problem is that us humans are limited in how much data we can handle, so we need to somehow remove everything in the list we’re not interested in. We do this by applying some rules that filter out everything else, and only leaves a list of stuff we’re interested in.

Case example: We want to find a picture of a dog. We go to google and search for “dog”. The result is way too big and contains both sites and images. Thanks to the filtering function, we can easily click “Images” which filters out any result that is not an image.

What is a funnel?

“A funnel is a pipe with a wide, often conical mouth and a narrow stem. It is used to channel liquid or fine-grained substances into containers with a small opening. Without a funnel, spillage would occur.” [Wikipedia]

The funnel is designed to aid in getting stuff from containers with large openings into containers with small openings, reducing the messiness of spillage.

It doesn’t exclude anything. The whole point of the funnel is to NOT exclude (spill) anything!

The problem:

So, we have a function designed to make a dataset smaller by excluding stuff. Somehow we decided that it was convenient to depict this with an item that is designed NOT to exclude anything.

The solution:

As it seems, I’m not the only one who have started to wake up from this bad dream. (There’s even a survey on LinkedIn where more people hate this icon than love it)

Some people are also trying to create alternatives to the current standard. Here are a few I’ve found:

New Filter Icon

New Filter Icon

I can see the basic idea behind this icon, even if I agree with some of the dribbble commenters saying that it could be visualized more clearly.

Filter icon

Filter icon

The simplicity of this one is interesting, but also hides its intention. What does a upside down pyramid of dots have to do with filtering?

Filter icon

Filter icon

This one is a bit unclear, I think. Two dots become one, or is it the one dot that is split up into two? Or is it three nodes connected in a network?

Filter

Filter

This one is based on the same idea that there’s some kind of “wall” that lets through one arrow but not another. I like this concept, but I feel that the reason why one arrow is bounced (aka the filter) isn’t immediately recognised, which makes it hard to immediately form an idea of what is depicted.

One of the newer alternatives I found in TweetDeck (It’s the icon in the top right of each column):

TweetDeck Filter

TweetDeck Filter

And a variant of this I found in the swedish news app, Omni [http://omni.se/]:

Omni

Omni

I can understand where this icon comes from, since one of the common controls in a filter function is a slider, to define a range fo two values. But, really, does this depict a filter function? I’m not convinced.

One common flaw I see in these examples is that to understand them, the user needs to know that they’re trying to depict a filter. Once you know that, it’s easy to see the basic idea “many -> few” or the idea of “exclusion”. But what about someone who doesn’t know that, or if there isn’t a label next to it to tell? Then all we’re seeing is lines and arrows or dots.

There has to be a better way to depict a filter. I’ll dedicate my soul to finding it.

PS:

I know, there is something called a “filter funnel”.[http://en.wikipedia.org/wiki/Filter_funnel] It wouldn’t be fair of me not to mention it. Basically, it’s a funnel that you put a filter paper in and separates particles out of liquids. And really, do any of the currently used funnel icons show any filter paper?! Nope.

Posted: January 17th, 2014
Categories: Design, Ideas, Mobile, Thoughts, UX, Webdesign
Tags:
Comments: Comments.

TV Guide for Status Board

Note: This Status Board panel displays the tv guide for swedish channels, and is mostly intended for swedish Status Board users. That said, I’m switching to swedish.

tv-panel

Status Board för iPad kan användas för att visa en mängd oliks orters data. När jag är hemma vill jag ofta snabbt kunna se vad som går på tv (att slå på tv:n bara för att bläddra igenom kanalerna för att sedan se att ingenting av intresse visades är ju alldeles för jobbigt!), så jag byggde denna panel som visar vad som går nu på tv, samt vad som kommer efter nuvarande programmet. Panelen använder sig av omtv.se :s javascript för att hämta programmen.

Ingen konfiguration behövs, så det är bara att klicka på knappen nedan från den iPad där du har Status Board installerat.

Klicka här från din iPad!

 

Posted: May 2nd, 2013
Categories: Design, Mobile, Status Board, TV, Webdesign, Widgets
Tags:
Comments: Comments.

Trello in Status Board

Update 2: Apparently, there was a change in how Trello supplied the user token, so my script simply didn’t work. This should be fixed now, and the scripts work!

Update: Instructions to get this panel on your iPad are now up and running, and it should be easy enough for most people to get this working! See post for details!

One of the first widgets I planned on building after getting Status Board was one for Trello, the taskplanning tool.

Of course I want to keep track of how many tasks I’m working on right now, and how many are still in the queue. Maybe I want to see the names of the cards in my list, and maybe I want a burndown-chart for some projects, I haven’t decided…

I wasn’t very familiar with the API, and I couldn’t find a functional php-wrapper for it, so I used VeggieMeats php-trello as a starting point, and fixed it where it had to be fixed. (Yes, when I get the time, I will fork it and upload the corrections I’ve found).

Because of this, the trello widgets was put in the back of my head for a while, while I developed a few other widgets, such as the Google Analytics ones and the SL widget.

But now the time has come, and my focus is now on Trello. The first of three planned widgets is done, and it looks like this:

IMG_0413

It’s very simple. You enter a boardID (plus some other sensitive info, since this board is private) and then it shows you how many (open) cards are in each list. Folks, this is pulled right from the API, no manual CSV here.

There’s probably more info to be added to this graph later o, but for now this does what I need it to.

In a while, I will make this availible for anyone. I need to come up with a (kind-of) user-friendly way to get all the info correct. We’re talkin loong user tokens and id:s you need to find. There will probably be some kind of form on this page where you can enter you info and then it will give you a link to open on your iPad to install the widget. But, as I said, I’m working on how to make this easy for everyone.

Instructions to get this working in your own status board with your own Trello board

First, make sure you do this on the iPad where you have Status Board installed!

1. Get your user token from Trello (if you haven’t got it already). I made a script for this to make it easy for you to get your own. You open a link from my site (further down) and it will redirect you to Trello’s authentication page. There, you’ll need to approve my “app” to access your data (read-only) and then it will redirect you back to my site where your token will be presented. Copy this token and paste it in the form below. Here’s the link!

2. Get your Board ID from the Trello Board you wish to use in this widget. I found that the easiest way to get the ID is to open the board in a browser and then find the board id in the url (as pictured below). Then copy this ID and paste in the form below.

trelloboardid

 

3. Get your username from Trello (If you need help with this, tweet me, and I’ll help you) Copy it and paste it into the form below.

4. When all fields are entered correctly, tap the button below the form, and Status Board should open with this new Panel in it!

Form to enter your data in:

Paste your user token: Paste your username:

Paste your Board ID:

Click here on your iPad!

(If above button doesn’t work)

Come back here for more info, or follow me on twitter where I will post as I update.

Also, if there’s some trello functionality or stats you’d like to see that I haven’t thought of, post it in the comments, and I’ll see what I can do!

 

Posted: April 22nd, 2013
Categories: Design, Stats, Status Board, Webdesign, Widgets
Tags:
Comments: Comments.

GA Top Viewed Pages panel for Status Board

After creating my first Google Analytics panel for Status Board, showing a nice graph over number of Visitors and Pageviews the last week, I wanted to see more of what content users found interesting. So I quickly wrote a table panel that showed the top pages and how many views they had, also over the last week. Some of the code is rather custom, as in my page titles I have a “carlfranzon.com >>” prefix completely messing up my table names. I hade to parse the name string to only get the interesting portion. And I never realized this would be interesting to anyone else.

Until today, when @timteeling posted on twitter that he had forked my repo to do exactly this! Since I noticed he hadn’t implemented this string parsing, I decided to share what I had come up with, and here it is!

SBtoppages

 

As you can see, the pageviews show in yellow, just to match the yellow in the other panel. They go nicely together!

Get the script here
Posted: April 19th, 2013
Categories: Design, Stats, Status Board, Webdesign, Widgets
Tags:
Comments: Comments.

SL panel till Status Board

This panel is mostly intended for swedish users in Stockholm who want to display departures from any station in Stockholm in the iPad app “Status Board” from @panic. Perhaps you’re interested in my other panel that shows you Google Analytics stats for any of your sites? Therefore, I will now switch to swedish.

Appen Status Board från Panic är en våt dröm för alla oss som älskar data, statistik och att visualisera data. Med appen följer en del standard-widgets, för t ex dina iPad-kalendrar, väder och klockan.

Den stora styrkan sitter dock i de tre “DIY” (Do it yourself) panelerna. Med de kan man anropa en webbadress och få data levererat med jämna mellanrum. Självklart finns regler för hur datat ska vara strukturerat för att appen ska förstå hur det ska visas.

För oss Stockholmare har jag tagit fram en sådan här panel som visar kommande avgångar från vilken SL-station som helst. Man kan också ställa in en “avståndstid” (minuter det tar att gå till stationen). För mig tar det t ex 10 minuter att gå från jobbet till stationen. Då är det inte så intressant för mig att se de avgångar som går inom 10 minuter, de kommer jag ändå inte att hinna.

SL-panel

Du styr inställningarna genom att ange parametrar i url:en. Parametern station motsvarar ett stationsID för den station du vill se avgångar för. Dessa ID:n är inte helt enkla att ha koll på, så för att få fram dessa måste man ta en liten omväg. (I framtiden planerar jag att bygga ett litet formulär för att få fram dessa här på sidan)

Gå till TrafikLabs API-konsol för SL.
Öppna “GetSite”
Skriv den station du önskar och klicka på “skicka anrop”.
Kolla i texten under “svar” och hitta den station du ville, ID:t hittar du där.

Mer info och källkoden hittar du här på GitHub. Känn dig fri att lägga detta på en egen server om du vill, eller bygg ut koden med egen kod om du vill och kan!

För att installera panelen med standardinställngarna (Station: Kista C och Avstånd: 10 min) öppna detta inlägg på din iPad och klicka på knappen nedan. Då öppnas Status Board automatiskt.

 

Installera panel

 

 

Posted: April 18th, 2013
Categories: Design, Stats, Status Board, Webdesign, Widgets
Tags:
Comments: Comments.

Google Analytics Panel for Status Board

Update: Swedish Status Board users! Check out my new widget for showing SL departures. Read more here!

Update 2: I just released the companion panel for this showing you the top viewed pages of any site. Read more here!

I love Panic’s new app Status Board.

And I also love watching Google Analytics.

So I couldn’t help myself, and this is the result.

IMG_0408

 

The panel is a php script based on the g-api library for accessing Google Analytics, with a little tweaking of my own to support the newest GA API.

It basically seems to do the same as Hilton’s Ruby script, but this one runs on php instead.

The php-file (together with the modified g-api class) can be found on my github. Feel free to change as you please. In fact, you HAVE to change it in order for it to work.
Get the script here

 

Posted: April 13th, 2013
Categories: Design, Stats, Status Board, Widgets
Tags:
Comments: Comments.

Kapla session

Kaplastavar måste vara den roligaste presenten Melker fått hittills.
Jag tror att det blir en liten ingenjör. Eller arkitekt! Vi började
med en enkel 360-gradare…

Posted: January 24th, 2010
Categories: Design, Melker, Mobile
Tags:
Comments: Comments.

Logo copycat

Hittade denna logga på en bil. Har ingen aning om vad Tabs är för något, men loggan påminner starkt om HEAD:s logga. Vad tycker ni?

Update: Hittade HEAD:s logga på nätet och ser nu att jag blandat ihop “skidspetsen” som HEAD har som märke och trodde de använde ett sådant A. Men ganska lika är de ändå.

Posted: January 4th, 2010
Categories: Design, Mobile, Reklam
Tags:
Comments: Comments.

Förpackningsdesign?

Melker fick en underbar julklapp idag av Emma och Fredde. Play-Doh som
han älskar att hålla på med och “dega”. När jag tittade närmre på
den nu såg jag att förpackningen är nog en av de konstigare jag sett.

#1: Grejen verkar heta “Superfun!” vilket Play-Doh iof är men
någonting med lera vore ju lite mer beskrivande kanske…

#2: I kartongen är det utskuret bokstäver där lerburkarna verkar
ligga, men burkarna är runda allihop. Vad har bokstäverna med något
att göra?

#3: Varför har man just valt bokstäverna “A”, “B”, “D”, “H”, “K”,
“M”, “P” och “Q”? Känns som något taget ur Da Vinci-koden.

#4: I mittenfönstret till vänster sitter en flärp kartong med ett
hus i lera på bild. Ganska skum placering, i mitt tycke.

Det verkar komma från Scanditoy i Malmö, så det förklarar väl
allt…

Posted: December 24th, 2009
Categories: Design, Mobile
Tags:
Comments: Comments.