×
Namespaces

Variants
Actions
(Difference between revisions)

Series 40 UI concept design webinar – companion article

From Nokia Developer Wiki
Jump to: navigation, search
Krebbix (Talk | contribs)
m (Krebbix -)
 
Krebbix (Talk | contribs)
m (Krebbix -)
Line 1: Line 1:
 
[[Category:Draft]]
 
[[Category:Draft]]
''Delete instructional text in italic''
+
This article is companion for the Series 40 UI concept design webinars. It contains
 +
* shortlist of the webinar content,
 +
* solutions and proposals for the webinar exercises
 +
* discusses open issues which could not be solved during the webinar Q/A session
  
{{Abstract|This article explains how to ... }} ''Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.''
 
  
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
+
It covers both sessions:
{{ArticleMetaData <!-- v1.2 -->
+
* 22.08.2012
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
* 23.08.2012, link to slide deck and recording will be added
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
+
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
+
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
+
|translated-by= <!-- [[User:XXXX]] -->
+
|translated-from-title= <!-- Title only -->
+
|translated-from-id= <!-- Id of translated revision -->
+
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
+
|update-by= <!-- After significant update: [[User:username]]-->
+
|update-timestamp= <!-- After significant update: YYYYMMDD -->
+
|creationdate= <!-- Format YYYYMMDD -->
+
|author= <!-- Display as link [[User:username]] -->
+
}}
+
  
== Introduction ==
 
This wiki article is a companion to the webinar "Increase Your Nokia Store Success with User-centric Design of Series 40 Apps"
 
  
 +
Next UX related webinar:
 +
User-centric Design of Series 40 Apps: Games (preliminary title), about game interaction paradigms, menus and all that jazz
 +
* 13.09.2012, 10:00 Helsinki time
 +
* 19.09.2012, 18:00 Helsinki time
  
== Summary ==
 
  
 
''Remove Category:Draft when the page is complete or near complete''
 
  
 +
=Shortlist=
 +
===Answer the following questions before you start the design===
 +
* Which problem does your application solve?
 +
* Who will be using your application?
 +
* When and where will people use your application?
 +
* What makes your application mobile?
 +
* What makes your application better than others?
 +
* How do you make money with your app?
 +
* How do you sustain your app (why do people continue buying your app or its content)?
 +
* What is the name of your application (the shorter the better)?
  
''The "platform categories" will be displayed here in '''preview''' only - Copy paste relevant categories into text here''
+
===Steps to design your application===
 +
* Idea
 +
* Write down all goals - with somebody else
 +
* Introduce and group goals
 +
* Vote for groups (vote per person = groups/2)
 +
* Prioritize by votes - and business drivers
 +
* Create a flow-end based on a goal
 +
* Define a start point (maybe the splash screen of your application)
 +
* Fill the necessary steps between the start point and the flow end
 +
* Create flows for all goals
 +
* Sort the flows (which flows belong together)
 +
* Group flow steps to views
 +
* Find a matching navigation structure
 +
* Prioritize functions and information
 +
* Compose your view
 +
* Test it
 +
* Re-design where necessary
 +
* Continue testing and adjusting the design
  
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}}
 
  
''Add categories below using category selector.''
+
=Problems=
 +
# When do you choose a tumbler instead of a list? Do not restrict this problem to Series 40 Full Touch LCDUI or Nokia UI.
 +
# How do you use radio buttons and when do you use check boxes?
 +
# Check ”panta rhei” from [http://en.wikipedia.org/wiki/Panta_rhei www.wikipedia.org]
 +
# Compose a view
 +
* Business driver is to sell e-tickets for a soccer game within an entire soccer league
 +
* In the previous view, the user has chosen this certain game. For this game she wants to buy tickets
 +
* Only Series 40 full touch
 +
* No category bar, standard header bar and Back button
 +
* View items [amount of votes, max 8]
 +
  * Buy tickets (link) [6]
 +
  * More information about the stadium (info) [1]
 +
  * Show how many tickets have been bought for this game by this user (info) [8]
 +
  * Display the e-tickets [6]
 +
  * Show start time (info) [7]
 +
  * More information about the soccer teams (link) [1]
 +
  * Show stadium name (info) [5]
 +
  * Navigate me to the stadium (link) [4]
 +
  * Show stadium adress (info) [2]
 +
  * Show emblems of soccer clubs (info) [8]

Revision as of 09:09, 21 August 2012

This article is companion for the Series 40 UI concept design webinars. It contains

  • shortlist of the webinar content,
  • solutions and proposals for the webinar exercises
  • discusses open issues which could not be solved during the webinar Q/A session


It covers both sessions:

  • 22.08.2012
  • 23.08.2012, link to slide deck and recording will be added


Next UX related webinar: User-centric Design of Series 40 Apps: Games (preliminary title), about game interaction paradigms, menus and all that jazz

  • 13.09.2012, 10:00 Helsinki time
  • 19.09.2012, 18:00 Helsinki time


Contents

Shortlist

Answer the following questions before you start the design

  • Which problem does your application solve?
  • Who will be using your application?
  • When and where will people use your application?
  • What makes your application mobile?
  • What makes your application better than others?
  • How do you make money with your app?
  • How do you sustain your app (why do people continue buying your app or its content)?
  • What is the name of your application (the shorter the better)?

Steps to design your application

  • Idea
  • Write down all goals - with somebody else
  • Introduce and group goals
  • Vote for groups (vote per person = groups/2)
  • Prioritize by votes - and business drivers
  • Create a flow-end based on a goal
  • Define a start point (maybe the splash screen of your application)
  • Fill the necessary steps between the start point and the flow end
  • Create flows for all goals
  • Sort the flows (which flows belong together)
  • Group flow steps to views
  • Find a matching navigation structure
  • Prioritize functions and information
  • Compose your view
  • Test it
  • Re-design where necessary
  • Continue testing and adjusting the design


Problems

  1. When do you choose a tumbler instead of a list? Do not restrict this problem to Series 40 Full Touch LCDUI or Nokia UI.
  2. How do you use radio buttons and when do you use check boxes?
  3. Check ”panta rhei” from www.wikipedia.org
  4. Compose a view
  • Business driver is to sell e-tickets for a soccer game within an entire soccer league
  • In the previous view, the user has chosen this certain game. For this game she wants to buy tickets
  • Only Series 40 full touch
  • No category bar, standard header bar and Back button
  • View items [amount of votes, max 8]
  * Buy tickets (link) [6]
  * More information about the stadium (info) [1]
  * Show how many tickets have been bought for this game by this user (info) [8]
  * Display the e-tickets [6]
  * Show start time (info) [7]
  * More information about the soccer teams (link) [1]
  * Show stadium name (info) [5]
  * Navigate me to the stadium (link) [4]
  * Show stadium adress (info) [2]
  * Show emblems of soccer clubs (info) [8]
145 page views in the last 30 days.
×