Autour de flash

Native mobile applications vs mobile web solutions

autourdeflash — Tue, 24 Jan 2012 16:46:13 +0000

No winner in this quest. The only purpose is to help you picking up the solution that fits the best your needs.

Native web applications

pros:

binary stored locally,
interfaces directly with the mobile operating system,
best performance. It takes full advantage of system resources,
access to hardware capabilities,
address book, SMS, camera & audio inputs and all the built-in sensors. They allow to create immersive experiences for a better user experience,
run processes in the background,
easily monetize through mobile applications stores.

cons:

need to create one version for every platform. Each mobile OS comes with its own unique tools and the SDK is platform-specific,
the cost of creating and maintaining all the versions can quickly become prohibitive,
hybrid approach that combines native development with web technology proposes to bridge web applications and mobile devices. They can be deployed on multiple plateform. Phonegap is one of them,
updates are not a one step process and you usually have to go through the process of submission and approval required with some app stores.

Web mobile applications

Modern mobile devices lean on powerful browsers that support many of the new HTML5 capabilities, CSS3.
For Twitter and facebook, they are the most popular mobile experience before native application with 14% against 8% for the first and 19% against 4% the last.

pros:

build on common web-standards technologies html5 & css3
no installation is required
update process is direct and requires a simple patch on the server
visibility is great. If you have content online, people will find through search and share links to it through email, social networks, or web pages
native mobile applications are actually increasing web use on mobile devices because each time a web link is shared or referenced in a native application it opens in a web browser window.

cons:

do not take advantage of all the os resources. UI Effects (transitions, transformations) could suffer from that and not really be smooth.
content need to be loaded. Loading delay can negatively impact discovery and ongoing usage. html5 Application cache feature can speed up the process.
Accessible built-in sensors are limited. Location detection, device orientation and touch are the only ones for now. User experience is impacted.

Wireframes

autourdeflash — Mon, 09 Jan 2012 09:28:03 +0000

Sketches help you generating and exploring ideas and concepts bottom line being creative. When this first phase is completed, some ideas need to be shaped. We have to develop a more detailed visual representation of the page structure and its content and also suggesting the navigation and interactions.

These visuals will be used to communicate. They must be readable and easily understandale and revisable. It’s true inside a team where the different parties speak their own language but further more with third parties that are not as familiar in reading and understanding of drawings as professionals are.

Sketches do not fit all these requirements and are efficiently replaced with digital wireframe.

What is a wireframe

A wireframe is a low-fidelity visual representation of a website sometimes referred to as a skeleton, outline or blueprint. They represent the basic page layout structure and navigational scheme of the website’s page sand major site components.

Some important points to recall:

a wireframe is all about function not form so do not try to make it pretty. Avoid any visual enhancements that could distract the audience unless it helps to the comprehension of a specific point,
it’s a communication tool,
- they are used to exchange approaches between designers, developers, stakeholders and clients,
- think to annotate them to communicate your rationale for your design decisions. they must be concise and focus on user experience.
do not hand-draw your wireframes
- a change in an element shared between many pages force you to redraw all your pages. If your preparing wireframes digitally, you can easily reuse components to significantly speed up the process,
- it will require a big amount of work if you want to convert the drawing into an interactive format,
- if the designer and the client are not in the same location, and thus cannot sit down together with physical sketches, it can be simpler for the designer to send the client a link that he can regularly check rather than scanning sketches (face issue like resolution/orientation, colors…) to email them,
- a wireframe is a deliverable, it should be presentable, maintainable and easily revisable.
no need to create a wireframe for every single page. You can use multiple wireframes to describe differents layouts, interactions and states,
prefer sketchy style to polished lines
- it better communicates that it’s a discussion, not a decision which invites more the clients to make feedback. It doesn’t give the false impression of completion,
- switch to a polished style on elements that have been adopted is a good way to show the progress. For that reason, give the priority to software that allow you to easily switch between the two styles,
- you can combined them with a moodboard that gives an idea of how the color scheme, textures, typography, and other visual elements will look.

Sketchy wireframes can’t replace traditional sketching during the ideation phase and do not be used too early because they can limit your creativity.

wireframing to scale is a good idea.

What a wireframe is not

Do not think a wireframe as:

a visual design specification nor an aesthetic approximation of a website
a technical requirements document
a user research document
an interaction design document
a content specification

What are its benefits ?

Well, plenty. It helps:

to focus on functionalities and user experiences,
to picture the final website architecture and composition by clarifying layouts, states, interactions and navigation,
to visualize and refine navigation,
to evaluate the overall effectiveness of the page layout against usability best practices,
by increasing the productivity and efficiency of the project process by being a great starting point for developpers, designers and copywriters,
to determine development requirements,
to identify many of the issues in a way that is time and cost effective before the design is completed. Every parts can easily be revised or discarded,
to adopt a formatting scheme that will maximize readability,
clients to visualize your ideas more easily than when you just describe them verbally,
- must give a clear understanding of what is going to be developed,
- show what the site will roughly look like: layout, navigation, content in context,
- help to peruse the different use cases.

Wireframing is not a cure-all, but a valuable tool. It’s something that isn’t lock down and should be adjusted according to the attendee you are speaking to.

Ideation sketching

autourdeflash — Wed, 04 Jan 2012 18:53:29 +0000

Ideation is the initial stage of the design process. It is the process of generating and exploring ideas and concepts through rough drawing named sketches.

It’s important to keep in mind that the purpose of sketching is not to identify a solution but rather to explore as many ideas and alternatives as possible. In this context, sketches are a flexible and quick way to confront visually ideas inside a team. They found their place during the ideation process but can be used at any point of the design process. In most cases, They are not good enough to present to clients.

They offer different advantages:

a pen and a sheet of paper are the only tools you really need. You should prefer markers to pencils to remind you that there is no place for details,
quick to make and easy to review with team members,
no need to have drawing skills, only concepts matter at this stage,
they are fast to make and easy to dispose,
ideas captured in this form are quite abstract and so rejecting them or simply critiquing is much easier than rejecting ideas that have been refined over hours,
they are not final solution, so we don’t care about quality,
the low fidelity of sketching encourages experimentation,
sketches make the team focus on structure and functionnality rather than visual and aesthetic details,
makes changes is less difficult and expensive that it could be with wireframes or worst mockups and protoypes.

The process can last from few hours to severals days. Sharing the process over severals days is a good idea to give the brain some break and let the subconscious do its job. You can work alone but it is more effective to do it with others team members to get more feedback.

Think to finish what you have started before jumping to another idea. It’s a common mistake and it’s important to sketch out important ideas rather than constantly creating and rejecting them in your mind hoping they could be better. At the end of day, you risk to get a bunch of unfinished sketches that do not really fit the initial ideas and put you in a bad mood.

37 signals shares different sketch styles of their designers here.

Sketches are not prototypes

autourdeflash — Tue, 27 Dec 2011 16:55:35 +0000

If you intend to take part in the design concept you will obviously soon or later confront yourself with the notion of sketch and prototype that could sound at first confusing. You could find the frontier fuzzy and may ask yourself the question:

« Is eventually sketch just another word for protype or low-fidelity prototype? »

The answer is NO.

Sketches and prototypes are both instantiations of the design concept but they serve different purposes and appear at different stages of the design process. Sketches are used in the early ideation stages, whereas prototypes are used at the later stages where things are converging in the design process.

The ideation stages are all about getting a concept out and sketching the best way to explore, generate, refine and evaluate a range of interaction concepts to gain a deep understanding of the undertaking. Sketches must be done fast and there is no place for details or perfection. During this period of confronting ideas, a sheet of paper and a thick pen is often preferred.

On the contrary, the investment in a prototype is larger than that in a sketch, hence there are fewer of them, they are less disposable, and they take longer to build.

Bill Brandon illustrates this wonderfully on the following diagram.

He completes by saying: «The difference between the two is as much a contrast of purpose, or intent, as it is a contrast in form. The arrows emphasize that this is a continuum, not an either/or proposition.»

Un peu de lecture

autourdeflash — Tue, 15 Nov 2011 09:01:20 +0000

Dernier bouquin que je pourrai vous conseiller pour ceux qui s’intéressent à la conception d’ IHM.

Designing Mobile Interfaces

Bonne lecture

La révolution du multi-screen

autourdeflash — Mon, 18 Jul 2011 09:08:14 +0000

Aujourd’hui, je vous propose un retour sur la journée creative week d’Adobe 2011 consacrée au multi-screen que l’on pourrait traduire par multi-écrans en Français.

Voici en substance, ce que l’on pourrait retenir.

Une période de mutation technologique

Après la culture du papier, on entre un peu plus chaque jour dans ce que l’on pourrait appeler la culture de l’écran avec l’intrusion dans notre vie courante d’une multitude de terminaux initiateurs de nouveaux standards de publication. Au coté du web, on retrouve maintenant les smartphones, les tablettes et prochainement si ce n’est déjà commencé les télés connectées. Loin d’être effrayés face à cette évolution rapide du marché puisque l’on rappelle que l’Ipad est sorti il y a un peu plus d’un an en Janvier 2010, les consommateurs s’approprient même immédiatement ces nouveaux périphériques. Pour les créateurs, une veille technologique en interne devient obligatoire pour suivre au plus prêt les évolutions constantes et les attentes du marché.

Le web est maintenant décloisonné et les diffuseurs font face à un vrai challenge avec l’obligation d’offrir des contenus qui peuvent passer d’un média à l’autre car les utilisateurs veulent pouvoir accéder aux informations quelque soit l’endroit ou ils se trouvent.

Offrir une certaine continuité dans la lecture des contenus

Pour les diffuseurs, ces nouveaux périphériques sont des nouveaux canaux de distribution de leur marques. La tablette par exemple est un support innovant qui à partir d’une grammaire inédite permet d’offrir des nouvelles expériences de lecture de contenus enrichis. La stratégie face à ces nouveaux standard de publication est de développer des pôles d’audience et de proposer des abonnements transmédia pour qu’un particulier puisse accéder à tous les contenus sur tous les supports. Offrir une continuité dans la lecture au travers des nouveaux standard de publication que sont le web, les smartphones, les tablettes et bientôt la télé connectée est d’ailleurs un vrai challenge. Dans ce contexte, la monétisation des contenus offerts se posent plus que jamais et cela passe obligatoirement par la limitation des flux de production afin de délivrer le “même” contenu sur différentes plateformes.

La fragmentation des supports

Pour les créateurs, il s’agit de s’aligner sur ces nouveaux standards et la première difficulté réside dans la fragmentation des différents supports autant en ce qui concerne

la dimension des écrans
la résolution des écrans mesurée en PPI (Pixels par pouces)
l’Os (android, ios, qnix, hp webos)

Cela impacte fortement les méthodes de développement d’ergonomie et de design.

Changer la manière de penser

Il ne s’agira pas de copier le web sur les applications mobiles mais plutôt d’exploiter les forces et faiblesses de chaque terminal pour renforcer l’expérience utilisateur.

Avec l’arrivée de la tablette, on peut pratiquement parler d’internet canapé et on devra donc proposer à l’utilisateur une navigation plaisante et récréative. Avec le smartphone, on se situera dans une consultation itinérante. On cherchera donc naturellement à utiliser les forces ergonomiques de chacun.

On pense notamment à:

accéléromètre
capteur de luminosité
gyroscope
changement d’orientation (portrait, paysage)
micro, téléphone,
geolocalisation,
interaction tactile: multi-touch et mouvements complexes définis comme des gestes ( pincer pour le zoom ou la rotation, pan…)

Source d’innovation et de créativité à la fois en terme d’usages et de marketing, les créateurs de contenus doivent au final changer leur manière de penser les services et s’adapter à ces nouveaux périphériques afin d’améliorer l’expérience utilisateur:

adapter la manière de parcourir et d’interagir avec un ouvrage,

avec un print, navigation horizontale,
avec une tablette navigation horizontale et verticale.

s’appuyer sur les nouveaux modes d’interaction
concevoir des expériences immersive au sein d’un document interactif an s’appuyant sur les fonctionnalités du support.

On oubliera donc le copier-coller et on insistera plutôt sur la complémentarité entre site web et les applications mobiles et donc une consommation différentes des services. Un scénario possible pour un film. On pourra penser que la tablette ou le pc se prêteront naturellement au visionnage des bandes annonces dans son canapé et le smartphone le compagnon idéal pour géolocaliser le cinéma.

Pour la conception, la démarche s’inverse et on partira plutôt de l’expérience mobile (interactivité, design) pour l’étendre à la réalisation du site web.

Développement natif ou sites web adaptatif

Une autre question se pose. Faut il faire du développement natif c’est à dire concevoir des applications dédiées à un terminal ou proposer des sites web qui seraient adaptatif ?

la question n’est pas tranchée car il est difficile d’en faire une généralité mais la solution se trouvera dans le rapport des paramètres suivants:

prix de revient
déploiement
mise à jour
méthode de référencement à travers les « market place » android ou ios.

Adobe se positionne en proposant l’exportation d’applications flash vers les formats natifs des différentes plateformes existantes avec des performances de plus en plus compétitives. Au format web, l’absence de gestion du player flash par ios représente un vrai barrage et html5 sera à priori privilégié.

Un peu de lecture

autourdeflash — Fri, 15 Jul 2011 09:15:51 +0000

Ma dernière lecture: Tapworthy: Designing Great iPhone App

Toutes les infos ici.

Article publié sur MediaBox: Traduction de l’article de M. Chaize intitulé “Swipe on mobile items”

autourdeflash — Fri, 01 Jul 2011 07:43:16 +0000

Cet article est une traduction de l’article « Swipe on mobile items » écrit par Mickael Chaize. J’ai opté pour le titre « Périphérique tactile: implémenter un mouvement de glissement dénommé swipe en anglais sur l’élément d’une liste ».

De nombreux détails ont été ajoutés afin d’éclaircir certains points peu ou pas du tout explicités.

PRE-REQUIS

connaissance: Une première expérience avec Flash Builder est exigée.

niveau utilisateur: Ce tutoriel s’adresse à des utilisateurs de niveau débutant à intermédiaire ayant une première expérience dans le développement d’application web/bureau/mobile.

logiciels: Adobe Flash Builder 4.5+

Sur la vidéo de démonstration, on utilise la distribution 4.5.1 qui apporte une nette amélioration des performances.

ca se passe ici.

Bonne lecture

Flash Catalyst par l’exemple: n°2

autourdeflash — Mon, 27 Jun 2011 13:35:53 +0000

PRE-REQUIS

connaissance:
Une première expérience avec Catalyst est fortement conseillée. On considérera ainsi comme acquis la compréhension générale du fonctionnement de Catalyst et des différents panneaux qui le composent. Catalyst s’appuie massivement sur la notion d’état, il est donc préférable de connaître un minimum sur cette notion telle qu’elle est implémentée dans Flex/Flash Catalyst pour profiter pleinement de ce tutoriel.

niveau utilisateur:
Ce tutoriel s’adresse à des utilisateurs de niveau intermédiaire. Les concepteurs ont voulu un outil facile à prendre en main, c’est pourquoi je pense qu’un débutant curieux pourrait malgré tout s’en sortir. Son utilisation deviendra notamment rapidement très familier aux utilisateurs de la suite Adobe et en particulier Illustrator ou Photoshop. Au cours de ce tutoriel, nous ne nous appuierons pas sur le code généré pour ne pas trop alourdir ce tutoriel. Je pense malgré tout que c’est un bon réflexe à prendre pour les devigners (comprendre développeur-designer) auxquels le logiciel s’adresse en particulier pour bien comprendre le fonctionnement de l’outil.

logiciels:
Adobe Flash Catalyst Cs5+
Adobe Illustrator CS5+ (optionnel)

fichiers sources:

af.tutoriel.fcbe2-sources.140611.zip

PRESENTATION

Au cours de ce tutoriel, nous réaliserons les tâches suivantes:

import des écrans réalisés sous Illustrator,
gestion des états de composants de type générique, boutons,
réalisation d’une liste de données et des éléments répétés au travers de cette liste,
réalisation du clipping ou comment écrêter selon les limites du composant,
réalisation d’une barre de défilement horizontale et notamment les contraintes que l’on doit définir pour assurer un bon redimensionnement,
réalisations de transitions de type fondu, interpolation de mouvement, rotation 3D

On tachera à chaque fois d’orienter nos choix d’implémentation pour ne pas se fâcher avec son collègue développeur qui sera chargé de reprendre le prototype pour réaliser la version finale.

Pour se donner un peu de baume au cœur, jetons un petit coup d’œil sur l’application que nous allons réaliser. La video au format mov est disponible ici.

le tutoriel au format papier est disponible au téléchargement ici.

Flash Catalyst par l’exemple: n°1

autourdeflash — Tue, 14 Jun 2011 09:05:44 +0000

PRE-REQUIS

logiciels:
Adobe Flash Catalyst Cs5+
Adobe Illustrator CS5+ (optionnel)

fichiers sources:

af.tutoriel.fcbe1-sources.100611.zip

PRESENTATION

En surfant sur le net, je suis tombé sur le site wokine.fr. Jetez-y un petit coup d’oeil. Le système de navigation implémenté est assez répandu mais efficace et agrémenté d’idées simples améliorant la perception des effets. Pour ma part, j’ai voulu voir si on pouvait le réaliser facilement avec Flash Catalyst sous-entendu sans la moindre ligne de code. On tachera toute fois d’orienter nos choix d’implémentation pour ne pas se fâcher avec son collègue développeur qui sera chargé de reprendre le prototype pour réaliser la version finale.

Au cours de ce tutoriel, nous réaliserons les tâches suivantes:

- import d’un design réalisé sous Illustrator
- gestion des états d’un composant et de leur implémentation par Catalyst
- réalisation de composants génériques
- réalisations de transitions de type fondu, interpolation de mouvement ou de couleurs
- ajout d’interactions utilisateurs de type clic, rollover et rollout
- ajout d’effet de filtre

Pour se donner un peu de baume au cœur, jetons un petit coup d’œil sur l’application que nous allons réaliser (Désolé pour la qualité mais la conversion de la vidéo vers Youtube a fortement dégradé le son).

La suite du tutoriel est disponible au téléchargement ici.