Finishing off before summer holidays

Busy times just before the summer holidays when I try to wireframe, design (and probably cut up most of the graphics) for two applications we are working on right now at More Mobile Relations.

First one is a data usage application for an telecom operator that will be available for iPhone and Android sometimes early autumn. The second one is a video editing application for iPad and iPhone that will be available later this autumn.

Both really fun projects and I have posted some sneak previews on Dribbble. The sneak previews for the data usage application and here is the video editing application.

The 8 layers of an application

 

I have been thinking some about the different parts or layers that make up an application, independent on the OS. I all goes back to the insight that in creative meetings, briefs, workshops etc focus is always on the features/content of the mobile solution (usually an application).

A client also tend to focus on the features (yes, together with cost, previous experience, the team, promised timeline etc) when judging an application and comparing it with other companies proposals in a pitch.

In a current pitch meeting with a client I wanted to emphasize that parts of the app that is really hard to show in a pitch might be the success factors of the application – the application layers that creates the user experience and the feeling. These might be the layers that separates an application with similar problem identification, similar concept, similar solution and similar content (if any) from another application.

The 8 layers

  1. The challenge/problem for the end user/brand/company
  2. Concept = the creative idea
  3. Solution (including technical demands, resources etc) = how to solve the problem for the user, brand, company
  4. Content = part of the solution, includes features, images, copy, data
  5. Structure, logic, Information Architecture = organizes the content in an understandable way
  6. Visual design = presents the content in visually appealing format
  7. Interaction (tap, swipe, pinch, tilt, long press etc) = makes the content available and possible to interact with
  8. Feedback – animation, sound, tactile feedback = makes the interaction understandable

I believe that the layers 5. structure, 6. visual design, 7. interaction and 8. feedback creates the user experience and that 6. visual design, 7. interaction and 8. feedback creates the feeling.

What would for instance the todo list application Clear be without the user experience and the feeling – just an ordinary todo application.

Designing applications and mobile web – the tools, the tips and tricks

I have been designing applications, mobile sites and what not for the last 4-5 years at least. It have have been a challenge and a lot of trial-and-error type of thinking. What works? What doesn’t work? Why not? Image formats, quality, compression rates have been a big part of everyday work.

Lately though a lot of tools have been developed that will help you when designing mobile applications and mobile web a lot. Lets go through the tools and some tips and tricks that will make your life as a designer easier. Continue Reading

Stadium mobilanpassad – mina kommentarer

För ett par veckor sedan lanserade Stadium en mobilanpassad sida av Stadium komplett med e-shop. Adressen är m.stadium.se och är framtagen av Brightstep. Jag hade redan vid första besöket en del synpunkter på sidan och vissa lösningar. Mailade några idéer och förslag till Brigthsteps VD Mattias Pihlström men kanske är andra intresserade så här delar jag med mig av mina synpunkter och förslag till lösningar. Jag är medveten om att det jag sett är en första (men dock skarp) release och det har redan hänt vissa förbättringar på sajten. Continue Reading

Sammanfattning av MobXCon

Förra veckan var jag på MobXCon i Berlin. En tvådagars workshop/konferens med ämnet “Mobile Experience and Design & Usability”. Här sammanfattar jag mina lärdomar från de två dagarna i en post tillsammans med en Keynote som jag ska dra för kollegorna på More Mobile Relations.

Dag ett hade jag först workshop med Josh Clark, författaren till Tapworthy. Har du inte läst boken så rekommenderar jag att du gör det nu, kolla även in hans sajt där han har flera presentationer. Mycket bra och enkla tips om att designa för mobilen, här hittar du mina anteckningar i Evernote.

På eftermiddagen hade jag workshop med Darryl Feldman från Nokia i Berlin. Där diskuterade vi “micro experiences” och var inne på ämnet om vad som händer efter “touch” och om tekniken som en del av dig själv.

Dag två var det föreläsningar från ett antal namnkunniga personer. Jag sammanfattade mina erfarenheter i Keynoten och har delat upp erfarenheterna i:

  1. 7 mobila myter – där Josh Clark dödar vanliga föreställningar om den mobila kanalen
  2. Designtips – även här en del från Josh Clark
  3. User Experience – om bland annat “non discoverability”, mönster och multitasking
  4. Prototyping – där vi bland annat fick en demo av Fluids prototypverktyg byggt i html5 och specifikt för att prototypa mobilt
  5. Plattformsstrategi – om hur man ska tänka strategiskt
  6. Contentstrategi – där Karen McGrane gjorde starkt intryck på mig och fick mig att inse att WordPress ur lådan är ett dåligt CMS när det kommer till plattformsoberoende

I en paus fick vi dessutom en dragning från Microsoft om Windows Phone 7 och tankarna bakom Metro, deras GUI. Inspirerande att Microsoft gör något “eget” och tänker bortom grafiska ikoner som ska efterlikna en analog värld. Förutom dragningen fanns det chans att vinna en Nokia Lumia 800 med Windows Phone 7 – och jag vann den!

Jätteroligt förstås, speciellt eftersom den knappt släppts i Europa och det blir min första kontakt med Windows Phone. Återkommer med en post om mina upplevelser med den, men några snabba reflektioner. Hårdvaran känns riktigt gedigen och mobilen är snygg och smidig. Grafiska gränssnittet är som sagt modernt och trevligt och för en designer som jag känns det roligt att Microsoft fokuserat på typografin. Några kommentarer dock:

  • Typografiska gränssnittet är modernt, men hur “klickvänligt” kommer det vara för normalkunden, en tvåbarnsmamma från en svensk småstad som tycker läderimitationen i “Find my iPhone” är härlig?
  • Outlook har förbättringsområden. Den laddar inte automatiskt in bilder (som den har gemensamt med sin storebror Outlook på PC) och jag kan inte ens ställa in att jag vill att den ska ladda in bilder. Konversationerna trådas vilket jag inte gillar, inte heller det går att stänga av
  • Internet Explorer… största hindret för mig är webbläsaren. Den känns gammal och omodern på PC och så även i mobilen. IE är inte en webkit-browser som tex för iPhone och Android och det märks. Ett stort problem är också att många som bygger mobilsidor för “alla plattformar” inte anpassar den för Windows Phone – tex bygger i html5 eller med css-animationer

Återkommer dock med lite mera erfarenheter av Windows Phone så fort jag lyckas klura ut hur i h*lvete jag ska kunna skärmdumpa från den utan PC och massa hack och fultrix.

Läslista om mobildesign och utveckling

Tänkte dela med mig av en läslista med litteratur som täcker in de områden som intresserar mig mest just nu. Det innebär texter om att designa och utveckla för mobilen, “responsive design” samt infographics och användbarhet.

MobXCon Conference i Berlin

I november ska jag på MobXCon conference, en tvådagarskonferens i Berlin som handlar om mobilt UX och användbarhet. Första året konferensen körs men en hel del intressanta talare på schemat.

  • Josh Clark som bland annat skrivit boken “Tapworthy” som är en väldigt bra guide till design för appar, med grundläggande information och många och bra designexempel
  • Stephanie Rieger som ligger bakom Yiibu och “Rethinking the mobile web
  • Oliver Reichenstein från Information Architects som jag inte känner till så mycket om annat att de släppt ett snyggt WordPress-tema
  • Nancy Birkhölzer från Fjord, Fjord som bland annat ligger bakom Telias nya digitala manér
  • Darryl Feldman som tydligen leder arbetet med appar för Nokia/Microsoft vilket blir kul att veta mer om

Planerar och stanna någon dag efter konferensen och funderar på att hitta boende under konferensen via Airbnb, ett roligare boende där man kanske kan få lite personliga rekommendationer till Berlin.

Inspiration för design av Android och iOS

En liten post med sajter där man kan hitta bra exempel på hur andra har löst designen på loginsidor, profiler, dela innehåll, start-up-sidor etc för framför allt iOS men även lite för Android och mobila webbsidor. Mina tips är:

  1. Mobile Awsomeness
  2. CSSiPhone
  3. Mobile UI patterns
  4. pttrns
  5. Mobabled, min egna sajt där jag gjorde ett ambitiöst försök att samla design från appar och sajter, kanske borde jag bygga om den enligt samma modell som t.ex. pttrns ovan
  6. Dribbble där man kan söka på iOS, iPhone eller iPad
  7. Emberapp där man kan hitta design för iPhone och iPad
  8. LovelyUI

Har samlat dessa samt nya sajter som tillkommer på Delicious.com/glvstn/mobile+pattern

Foto: lucamascaro på Flickr

Edit, lagt till 7. Embedapp 11 mars. Lovely UI 11 april.