Opengreen

Opengreen (XVI Congreso Redepyme) es uno de los últimos proyectos en los cuales hemos trabajado, en este caso colaborado estrechamente con EOI. Se trata de un microsite pensado para difundir la presencia de EOI en SIMO, contemplando tres momentos: antes, durante y después del evento.

Conceptualización, diseño gráfico e implementación en Liferay de un site que utiliza y se interrelaciona con las redes sociales y los canales audiovisuales de EOI.

Efectivitat en la correcció de websites

Fa poc em vaig assabentar, gràcies a la Nuria, d’una aplicació online que permetia “incrustar” comentaris a una web.

Bounce és una forma “divertida i fàcil de compartir idees d’un website”. En la seva pròpia descripció, es destaca el fet de poder crear notes amb un “click and drag“, i compartir aquesta pàgina amb apunts amb qualsevol “amic o enemic”.

Amb una interfície simple i intuïtiva, només cal que escrivim la URL del website a www.bounceapp.com, cliquem a “grab screenshot“, i comencem a revisar i comentar. Un cop se’ns carregui la pàgina, podrem posar-li un títol (menú superior), logejar-nos i, al finalitzar, guardar la nova URL amb tots els comentaris fets (al menú superior, botó “save“).

Extremadament útil per l’etapa de revisió d’un projecte web. Només caldrà entrar a una web online (en entorns de treball on ja es disposi de Subversion, recordeu que disposeu d’una URL pública que us pot servir per aquesta aplicació), i començar a entrar comentaris i revisions. Així, amb l’ajuda d’una wikipèdia o similar, només caldrà apuntar la URL que Bounce ens proporciona, i el desenvolupador encarregat a corregir-ho podrà tenir tots els apunts in situ. Simple, ràpid i eficàç.

Interfície de treball de l'aplicació online Bounce

Jumbo Proudly African

Fa pocs dies ha vist la llum un dels nostres darrers projectes web: Jumbo Proudly African, una marca de productes i complements per a la cuina exclusivament africans.

Conceptualització, disseny i desenvolupament d’un lloc web de gran potència visual i alhora gran senzillesa informativa, centrat en la promoció del portfolio de productes Jumbo i el seu ús quotidià en forma de receptaris, juntament amb la integració d’eines de participació dels usuaris i espais d’interacció propis del Web 2.0. com, per exemple, la pàgina de Jumbo a Facebook.

¿Cómo sería la universidad ideal?

En Meddia llevamos meses trabajando en el proyecto Universiag10.org desde su conceptualización hasta la programación y diseño del blog, ofreciendo también apoyo en la dinamización 2.0. Uno de los resultados de ese trabajo ha sido esta infografía sobre los resultados en twitter del hashtag propuesto #uniideal. Podéis ver en la siguiente imagen las respuestas a la pregunta “¿Con qué palabra definirías la universidad iberoamericana ideal?” (clicar en ella para ampliarla).

(Diseño de Meddia, junto con Elena Sanz, de Ciencia Digital)

Penjades les comunicacions del IV Congrés de la CiberSocietat

Divendres passat, 13 de novembre, va tenir lloc la inauguració presencial del IV Congrés de l’Observatori de la CiberSocietat, del que Meddia ha creat la plataforma. Tot estava en marxa, els fòrums, els perfils, les activitats complementàries, els perfils a les xarxes socials… i totes les comunicacions penjades. Tant al web com físicament perquè els assisent les podessin apadrinar.

Com escriure per al web

Segons l’expert en usabilitat Jakob Nielsen, el text de les pàgines web no es llegeix pràcticament mai.

Partint d’una afirmació tan dura (però probablement certa) només ens queda actuar de la següent manera: cal redactar textos amb força i fàcils de llegir.

Hi ha diversos motius o causes que fan que el lector no llegeixi amb detall i es limiti a fer un escombrat visual de les pàgines buscant elements que cridin la seva atenció. Per això les pàgines han d’estar preparades per a aquesta revisió ràpida dels continguts.

Abans d’entrar en detall cal fer una menció especial a la inclusió de publicitat dins els webs, ja que els usuaris han après a ignorar els missatges publicitaris:

• els que estan camuflats dins el text, fins i tot quan volen aparentar informació objectiva. L’usuari detesta la publicitat intrusiva que el desvia del contingut central.
• l’usuari avançat ignora sistemàticament els anuncis publicitaris en forma de bàner o de finestra emergent (pop-up). A més, els nous navegadors bloquegen aquestes finestres emergents.

1. Estil:

• Brevetat i senzillesa: es recomana fer servir menys del 50% del text utilitzat habitualment en una publicació escrita. Els paràgrafs han de ser curts, de dues o tres frases únicament. Les frases han de ser curtes i directes.
• Missatge clar: l’objectiu central del missatge ha d’estar clar des de la primera línia, des del primer paràgraf.
• Una idea per paràgraf.
• Veu activa: tot i semblar més impersonal o objectiva, la veu passiva allunya i allarga innecessàriament el missatge.
• El lector, a priori, no sap de què estem parlant: eliminem argot, llenguatge especialitzat, acrònims, sigles, denominacions tècniques i internes…
• Cada bloc de contingut ha de ser autònom i permetre ser llegit de forma independent. Això implica no fer referències necessàries a blocs anteriors ni posteriors ni utilitzar convencions que depenguin, per a ser enteses, d’informació que està fora d’aquell bloc.
• Els primers 3/4 del primer escombrat visual haurien de donar pistes per saber què trobarem més avall, si és que hi ha més continguts autònoms. Això pot resoldre’s principalment a través del disseny i prototipat de la pàgina, mostrant estructures que comencen més enllà, gràficament diferents, etc.

2. Tipografia i estructura

S’estima que la velocitat de lectura en pantalla baixa un 25% respecte al paper. Així mateix, l’índex de concentració és menor en pantalla. Només un 10% dels usuaris tendeix a llegir un missatge de més de 3 pantalles (400 paraules), independentment del seu tema. Per tant, es recomanable:

• Deixar espais en blanc dins el missatge (salts de paràgraf, distància dels marges, interlineats generosos…)
• Emprar lletres amb molt contrast cromàtic vers el fons.
• Evitar imatges de fons.
• Utilitzar cossos de tipografia relativament grans (de 10 a 14px)
• Evitar textos que es mouen, intermitents, etc.
• Utilitzar les negretes de forma regular, amb més freqüència que al paper, per destacar la idea, paraula o concepte clau de cada paràgraf. Però controlar-ho: massa negretes col·lapsen el paràgraf i “invisibilitzen” la resta de contingut.
• Per als continguts, tipografies sans-serif (contràriament al que es deia pels mitjans impresos). Per a títols, pot alternar-se amb serif.
• Evitar cursives i paraules o expressions escrites totes en majúscules.

3. Estructura del missatge i dels continguts

La lectura a Internet no és lineal. És diagonal, irregular, trencada per salts i exploratòria. Per tant, és recomanable:

• Utilitzar llistes d’ítems, amb vinyetes o números.
• Estil de piràmide invertida. Un clàssic en l’estil periodístic. La importància dels arguments, de les idees, anirà decreixent a mesura que el lector continuï llegint. Així s’aconsegueix que, independentment del moment en què el lector abandoni el text, ja hagi llegit el més important. En resum: primer la idea general i després els detalls.
• En clau digital: una base ampla per a la piràmide invertida. Al mitjà digital, el peu d’una pàgina o d’un missatge té més pes que els continguts que puguin haver-hi pel mig. Per això, trencant la lògica de la piràmide invertida, el peu de missatge, el darrer bloc d’una pàgina, traurà profit d’un tractament estructural diferenciat i el seu contingut tindrà més possibilitats de ser llegit/clicat. Pot servir per concloure un missatge, per recordar punts interessants ja expressats i/o recuperar els èmfasis inicials, per donar un seguit d’eines de continuació, enllaços genèrics, etc.
• La nostra redacció ha de ser lineal (malgrat que a Internet la lectura no ho sigui). No intercalem temes o subtemes fins que hem acabat l’anterior; utilitzem subtítols o marques tipogràfiques o de paràgraf per indicar un canvi de tema; no recuperem temes ja tancats anteriorment (si no és a un bloc que pretengui fer de resum)…
• Cal fomentar la lectura lineal. Mirem de no excedir-nos amb la introducció d’enllaços interns o externs dins el text. L’usuari pot trobar-ho molest i pot sentir-se insegur per no saber si seguir amb la lectura o fer clic a l’enllaç.
• Si volem que un (algun) contingut sigui llegit amb més atenció, hem de facilitar-ne la impressió en paper.
• Corregir els textos.
• Fer servir llengües estrangeres amb professionalitat. Una mala traducció pot generar un efecte psicològic negatiu en els lectors estrangers que ens visitin.

4. Enllaços

A Internet, ningú té temps. Aquest és un factor comú de qualsevol sector, especialitat, gènere, moment del dia o franja d’edat. Per tant…

• Especialment en comunicació push, un objectiu bàsic ha de ser convertir la lectura en un clic en els primers 30-40 segons de la lectura.
• Per tant, el primer paràgraf i els 3/4 de l’escombrat visual ha de contenir diverses vies de sortida (conversió en clic), des del text, des d’alguna imatge, des d’algun botó o icona… Han de ser els enllaços amb els contingut més estratègic.
• Els enllaços són la porta de sortida i el retorn de la inversió d’una comunicació push. Ha de veure’s clarament que ho són. I, com les negretes, se n’ha de mesurar l’ús. Dins un mateix paràgraf o bloc, els enllaços competeixen entre ells i s’ha de triar el més significatiu, el més estratègic o el que condueixi més directament a l’acció que volem.
• No es recomanen fórmules tipus “clica aquí” o “segueixi aquest enllaç”, sinó hiperenllaçar les paraules o les fórmules clau, marcant (tipo)gràficament que són enllaços i només enllaços. També pot emprar-se l’adreça directa de l’enllaç, si és clara i curta.
• Els enllaços sempre han de portar al lloc on indiquen. Això vol dir que si anunciem un contingut, el clic ha d’anar directament a aquell contingut i mostrar-lo en pantalla; que no enviem l’usuari a pàgines prèvies o que intentem no enviar-lo a pàgines que necessiten registre previ, que no l’enviem a pàgines genèriques si no és el que estem indicant, etc.

5. Utilització d’imatges i icones

Les imatges compleixen diverses funcions dins un missatge electrònic, il·lustrant un contingut, ajudant a la lectura i la comprensió i, en general, construint una posada en escena més atractiva de tot el missatge. Caldria tenir en compte que…

• Han d’aportar alguna cosa al missatge, però no necessàriament de manera directa i unívoca. Una imatge pot il·lustrar una activitat sense estar-hi directament relacionada.
• No gaires per missatge. Probablement una de central i més voluminosa i opcionalment altres de secundàries i amb menys pes gràfic.
• Cuidar-se que una icona no provoqui un malentès cultural.
• La selecció de la imatge central, especialment, és important per a una comunicació electrònica. Cal prestar-hi atenció i triar-la en funció dels valors, significats, estil i fins i tot cromatisme que aporten al conjunt comunicatiu.
• Especialment per a les imatges centrals, podem utilitzar ocasionalment imatges de repositoris fotogràfics.
• És interessant incloure continguts en vídeo dins alguns missatges. Si ho fem, utilitzem la convenció YouTube del botó de play al centre de la imatge que porta al vídeo.
• El disseny de les comunicacions, especialment les seriades, poden incorporar algunes icones que el complementin.
• Algunes accions interactives poden indicar-se mitjançant botons o similars.

6. Títols i subtítols

Els titulars, títols i subtítols tenen gran importància en la lectura en pantalla.

• Utilitzar títols i subtítols amb més freqüència que al suport paper.
• Els títols han de ser senzills, construccions simples i curtes. Els jocs de paraules poden tenir resultats contraproduents.
• Els subtítols intercalats amb el text tenen la funció de subdividir i ajudar a l’exploració del text i, per tant, són molt importants en la lectura en línia.

7. Altres elements estructurals

Podem enriquir alguns missatges, especialment els monotemàtics, amb frases, cites o elements semblants. Quan ho fem, marcarem tipogràficament i/o estructuralment que allò és un element exogen.

Fonts: Bloc de Joan Mayans, useit.com, Website boosting

Article relacionat: 20 tips on how to write for the web

La Segona Edat Contemporània (II)

Poc més d’un any després de la publicació de l’article en que comentàvem la presentació d’aquesta iniciativa privada sense ànim de lucre, La Segona Edat Contemporània presenta ara la seva nova imatge gràfica.

Aquest nou impuls neix coincidint amb la publicació, en format PDF, de l’assaig que du per nom “La Societat de la Ignorància“, que podeu descarregar des de la mateixa pàgina web de La Segona Edat Contemporània o fent clic a sobre de la imatge.

Crisi analògica, futur digital

No es tracta de cap profecia, si no del lema del IV Congrés de la CiberSocietat.

Des d’ahir ja és públic el lloc web de la segona fase del IV Congrés, on se’ns presenta el lema “Crisi analògica, futur digital“, els 90 temes de debat i les fonts d’inspiració resultants de la participació de més de 500 persones a la primera fase de construcció del Congrés.

Cinisme i direcció de projectes

1. Projects with realistic budgets and timetables don’t get approved.
2. The more desperate the situation the more optimistic the progress report.
3. A user is somebody who rejects the system because it’s what he asked for.
4. The difference between project success and failure is a good PR company.
5. Nothing is impossible for the person who doesn’t have to do it.
6. Every failing, overly ambitious project, has at its heart a series of successful small ones trying to escape.
7. A freeze on change melts whenever heat is applied.
8. You understood what I said, not what I meant.
9. If you don’t know where you’re going, just talk about specifics.
10. If at first you don’t succeed, rename the project.
11. Everyone wants a strong project manager – until they get him.
12. Only idiots own up to what they really know (thank you to President Nixon).
13. The worst project managers sleep at night.
14. A failing project has benefits which are always spoken of in the future tense.
15. Projects don’t fail in the end; they fail at conception.
16. Visions are usually treatable.
17. Overly ambitious projects can never fail if they have a beginning, middle and no end.
18. In government we never punish error, only its disclosure.
19. The most difficult way is, in the long run, the easiest.
20. A realist is one who’s presciently disappointed in the future.

Musetech

El Museum Computer Network i la Museum Software Foundation són dues institucions que tenen per objectiu, respectivament, difondre l’ús de la tecnologia entre els professionals de museus i incubar projectes de software amb l’objectiu de transmetre el coneixement i establir estandards.

S’han unit per a crear una base de dades conjunta, Musetech, que funciona com a aparador i registre públic de totes les iniciatives que els museus americans estan duent a aquest nivell. Hi ha projectes de pressupost zero, i d’altres que costen desenes de milers de dòlars. També n’hi ha que estan pendents d’iniciar-se.