A light at the end of the road

In his talk at the IXDaBa Beer & Design, Andrés Rodriguez, showed us his thesis on a proposal for a standard on integrating Usability on software development process.

It was really interesting session. But the talk afterwards gave us a lot of insight of the real implementation of UX from a software engineering point of view.

He, as a head of a big team, change the hierarchy of the process and took the Ux people at the level of the software architect. Now the Ux team become a consultant for all the other areas and work with the software analysts.

As a designer it was a great surprise to know someone on the other side of the development that gives UX the place it deserves.

I have two quotes that I want to remark:

“…usability decisions always have an impact on the architecture, that´s why we must include it at the beginning of the projects…”

“…after the heuristics, a test with user must show problems, if not, something estrange is happening…”

He shows us that UX is growing and having real impact on many areas, and with it he gave us a little more certainty that there is light at the end of the UX road.

The best digital reading experience

In Ux design we always take care of the quality applied to the content in terms of legibility. The heart of the web is text, and we should take care of it a the most precious value in any design.

I read a lot of digital content, news sites, blogs and books. And it is really difficult to get good online comfortable text. Here is where projects like readability, or the reader functionality on safari comes to fill this void. and they’re good at it.

Most of my reading was done in NetNewsWire with a theme I make myself that fills all my reading needs. Sometimes I read on my iPhone on Reeder app. I even read a couple of books on the mobile Kindle app.

But all these thing don’t quiet cut it. The best tools and the most ad-hoc design wasn’t still comfortable enough to get the experience I was looking for.

Until I decided to buy a 6 inch 3rd generation kindle. It is a truly magical digital reading device. You really have to see one in person to fully understand it.

kindle

I must agree that it hasn’t got the most sexy interface, or that the font selection could be better, but these complains are overshadowed by the incredible screen, and the ultra light weight. With the kindle, you get the best digital reading experience, and this is the ironic part, it is because it looks almost like paper. You get the right portable size and weight, the convenience of load it with any content coupled with a not eye straying screen and long lasting battery. It is like you have an infinite page book with the magical ability of keeping its size and weight constant.

And it get even better, if you read a lot of different blogs you can send the articles you want to the kindle, almost as magical as the device, with Instapaper.

You just have to click on a bookmarklet on your browser (or the icon on netnewswire) and the entire article with it images, and without the ads, are sent to instapaper, who everyday or week, as you prefer, send you a compilation of all your unread articles specially formatted for your kindle. This gives you the choice of font family or font size on any content. And don’t forget you can read txt doc and even pdf.

You can say the ipad is a better device with the ability to become anything with the help of the vast software available, and you are right, is a better device, but not for reading. The weight is really a problem for long period use and the light emitting screen is not good on the eyes.

kindle

Speaking of light, the other day I was relaxing at direct sunlight and decided to do some reading. When I approach to my comfortable seat, my family screamed: “what are you doing? You wont be able to read anything at direct sunlight!”. They couldn’t be more wrong. More light the better, that’s the beauty of this screen technology. When they saw with their own eyes they were just amazed, even one of them told me to get one for him as soon as possible. And he was more amazed when I told him that this little wonder can give him a month worth of use with just one charge.

kindle

And there are more good things to say, it has wifi and a webkit browser, where you can do a good but slow online reading, twitter or mail check. You can even go to your google reader and see all your feeds. It has a mp3 player, but I don’t even bother to try it because I make all my music and posdcast listening on my iPhone, but if you don’t like to carry a lot of devices and enjoy reading with a little background music, this come in handy.

So, this little and almost weightless screen can become the window to all the written content you want, anytime, anywhere, giving you the best digital reading experience you can get.

Lion + iOs + iCloud: is all about piracy

Apple, with the latest announcement at the WWDC 2011, make it clear it was all about the software. But that’s just a part of the plan. There where two key things that gives us a hint of what Apple is up to.

The first one was the iTunes match. With the ability to, as they say, “store your entire collection, including music you’ve ripped from CDs or purchased somewhere other than iTunes”. The second one the price of Lion, just $29.99 via the App Store.

Who can argue to the advantage of legalizing all your pirated music for $25/year and with the possibility of syncing it to all your iOs devices?

And what about Lion, its not only $29.99, it is also possible to legally install it to up to 5 computers, as all the software on the App Store. Obviously you have to sign in to the Store, and there you are exposed to the “as simple as IOs” purchase and install system of thousands of applications.

They’re are clearly trying to introduce all the people they can to the simplicity of the iTunes and App Store and keep them there. With this strategy they want to duplicate the success with music on the software industry.

They could go to the hard way, use of the anti piracy abilities at hardware level on the intel chips, but thats is not good marketing for Apple and also user will hate imposed things on their personal computers. The strategy is crystal clear: get the user do what you want by giving them simplicity and a big advantage for doing so.

Now with this ecosystem you have a safe, legal, easy and convenient way to get software to all your devices and with the advantage of buy one, install on 5 machines, and with the Apple guarantee that you can reinstall all at any time from the App Store.

And with music, they want to give music piracy the final stroke by legalizing all your music with the hope that you buy the next album you want from the iTunes Store that already holds all your music.

We have been introduced to the future which we know will come with the internet: one place to know, get, buy and store all our digital assets. Internet is the OS. Internet is the business OS.

Web designers are obsolete

Web design as a profession has evolved many times in its short history, and we as designers evolved with it. But today if you talk about web design, you can’t talk about a web designer. It was a common notion that we must be like a design swiss victorinox. And anyone that still thinks that, won’t be in the industry for a long time. Web designers are obsolete.

Nowadays if you talk about web design you must include lots of specialized people, like digital marketers, creatives, information architects, usability experts, Ui designers, graphic designers, action scripters, front end developers, programmers, etc. No designer can longer assume that he can design and develop every step of a website or web application on his own.

We, as designers, can’t know it all, but it is important for us to know how all the areas of web development works. I can’t count how many designers only care about the graphic part of the web. Web Design is a heavily technical profession, and like it or not, graphic designers must have some technical knowledge, know how html/css works, what can be developed with Js, jquery, or what is @font-face, how AS3 is programmed, how a database work, what is Asynchronous JavaScript and XML, etc, what is a video codec. And more important, stay up to date on your profession.

It’s time to let the specialization grows in web design, you are no longer a graphic designer, you are a UI designer, a marketing designer, an information architect, a front end developer, an experience designer and many more aspects of web design that a graphic designer can be.

Our roll on web design has evolved. Today we have the opportunity to be the nexus hub in web development to enrich users experience and integrate our knowledge to all the web design areas. You can’t no longer be an isolated island and you can’t do it all. if you think so, you’ll be obsolete.

Dinamica del diseño en grandes proyectos – IXDA Bs.As. Beer & Design

Con motivo de los terceros jueves de cada mes de Beer & Design que organiza IXDA fuí invitado a dar una charla sobre la dinámica del diseño en grandes proyectos. Aquí pueden ver las diapositivas proyectadas ese día. Gracias a IXDA por la convocatoria y a todos los presentes por esta oportunidad.

IXDA Beer & Tell – Dinamica del diseno en grandes proyectos

Browser secure areas

Securest sizes 1024 x 768
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1003 550 1003 550
Windows XP 1003 567 1003 567
Windows Vista 1003 577 1003 577
OS X 10.5 1024 550 1010 550
Securest sizes 1152 x 864
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1131 646 1003 646
Windows XP 1131 663 1131 663
Windows Vista 1131 663 1131 673
OS X 10.5 1152 646 1138 646
Securest sizes 1280 x 768
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 550 1259 550
Windows XP 1259 567 1259 567
Windows Vista 1259 577 1259 577
OS X 10.5 1280 550 1266 550
Securest sizes 1280 x 800
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 582 1259 582
Windows XP 1259 599 1259 599
Windows Vista 1259 609 1259 609
OS X 10.5 1280 582 1266 582
Securest sizes 1280 x 960
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 742 1259 742
Windows XP 1259 759 1259 759
Windows Vista 1259 769 1259 769
OS X 10.5 1280 742 1266 742
Securest sizes 1280 x 1024
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1259 806 1259 806
Windows XP 1259 823 1259 823
Windows Vista 1259 833 1259 833
OS X 10.5 1280 806 1266 806
Securest sizes 1366 x 768
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1345 550 1345 550
Windows XP 1345 567 1345 567
Windows Vista 1345 577 1345 577
OS X 10.5 1366 550 1352 550
Securest sizes 1440 x 900
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1419 682 1419 682
Windows XP 1419 699 1419 699
Windows Vista 1419 709 1419 709
OS X 10.5 1440 682 1426 682
Securest sizes 1600 x 900
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1579 682 1579 682
Windows XP 1579 699 1579 699
Windows Vista 1579 709 1579 709
OS X 10.5 1600 682 1586 682
Securest sizes 1600 x 1200
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1579 982 1579 982
Windows XP 1579 999 1579 999
Windows Vista 1579 1009 1579 1009
OS X 10.5 1600 982 1586 982
Securest sizes 1680 x 1050
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1659 832 1659 832
Windows XP 1659 849 1659 849
Windows Vista 1659 859 1659 859
OS X 10.5 1680 832 1666 832
Securest sizes 1920 x 1080
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1899 862 1899 862
Windows XP 1899 879 1899 879
Windows Vista 1899 889 1899 889
OS X 10.5 1920 862 1906 862
Securest sizes 1920 x 1200
Operating System Full windows With Vertical Scroll
Width Height Width Height
Securest 1899 982 1899 982
Windows XP 1899 999 1899 999
Windows Vista 1899 1009 1899 1009
OS X 10.5 1920 982 1186 982

How do we got this information

With fresh virtual machines Os and browsers installs, and without any addons or special skins, and with maximized windows, we measure all the avalaible areas with and without scroll bars. Here are the 1024 x 768 measures examples:

Windows XP
Browser Full windows With Vertical Scroll
Width Height Width Height
Secure 1003 567 1003 567
Internet explorer 6 1003 607 1003 607
Internet explorer 7 1003 619 1003 619
Internet explorer 8 1003 567 1003 567
Firefox 2 1024 575 1007 575
Firefox 3 1024 578 1007 578
Opera 9 1022 599 1006 599
Safari 4 1024 648 1006 648
Chrome 1024 647 1008 647
Windows Vista
Browser Full windows With Vertical Scroll
Width Height Width Height
Secure 1003 577 1003 577
Internet explorer 7 1003 622 1003 622
Internet explorer 8 1003 565 1003 595
Firefox 2 1024 577 1007 577
Firefox 3 1024 587 1007 587
Opera 9 1022 603 1006 603
Safari 4 1024 646 1008 646
Chrome 1024 650 1008 650
Mac OS x 10.5
Browser Full windows With Vertical Scroll
Width Height Width Height
Secure 1024 550 1010 550
Firefox 2 1024 555 1010 555
Firefox 3 1024 550 1010 550
Opera 9 1024 570 1010 568
Safari 3 1024 581 1010 581
Safari 4 1024 599 1010 599

The web is 95% reading apps.

On October 2006, Informations Architects wrote a blog entry named “web Design is 95% typography” making an important statement on what web designer should focus on. More than three years has passed and that statement is more important than ever.

So, if 95% of web is typography, the same goes to the interfaces we design for them. All websites are reading applications, you read your bank account statement, your read your friends facebook wall, you read your favorite online newspaper, your read your preferred blog, your read your game portal forum, etc.

The interfaces we design are nothing else than a medium for reading content. With the Wired Magazine for iPad design  buzz , the debate on how a digital magazine should be was open. And the debate is wrongly titled, it should be how digital content should be accessible, manipulable, readable. If we apply all the critics that the wired app received to websites, we face with too many of the same problems.

The majority of websites are crowded with information snippets, ads, different kinds of menus on the same page and little hierarchy optimization. We have serious problems and you can see that on the advent of tools like Readability or Readable, that makes no other thing than optimize content for the screen. They make screen reading comfortable and simple, but this functionality should not be needed. Its our responsibility as web designers to make sure the content comes first, to make online reading a pleasure.

We were designing reading applications for more than a decade now, we learnd a lot of lessons on that time, and we are making the same mistakes over a over again. There should be no need for a magazine o newspaper iPad application, we already have websites, we just need to make them exceptional reading apps.

Magazines on the iPad II

There’s been a lot of buzz with the new iPad magazines that are appearing in the market, specially with the Wired one. There are two important facts that designers and magazine companies have to acknowledge, the iPad is a reading device, and you are selling text (ok, text with images, but the main content has to be read) and we were designing text for screens for years now, and with the exception of some pdf to flash magazines, all the content can be found on html websites.

The lessons learned over the past 15 years must be enough to prepare content for a reading device like the iPad without making the same mistakes over and over again, like trying to replicate print on screen or using offline world metaphors for content manipulation.

Today we live in an internet connected world, you can just ignore it in your app, it can’t be a sealed bottle floating alone, it must have the correct tools to manipulate and share your content, if you don’t do this, your audience will be forced by you to ditch your app and go online.

This issue brings a question I didn’t hear yet, what if we make our websites appropriates readings online apps that renders beautifully on the iPad? It can be done with a clever HTML5 coding and CSS. I think this is because they will have to start charging for reading websites, and the appstore brings the perfect artificial barrier to do that. Theres a little issue of connectivity speed, but it is an issue only on 3g, and soon, with 4g, it won be there anymore. Maybe this is just the start of the end of free content, but that deserves another time for thinking on its own.

So, looking to all these things, I came with a set of ideas that can contribute with the debate of what a reading app should behave.

1. Columns

They are a really bad idea. You don’t have the screen size or resolution to put two readable columns in there. You can see here starting with the ideal font size on a 1 column portrait layout, it can’t scale good to a 2 column landscape layout. The best option is to keep the one column. Of course depending not he content you can use other layout options, but for long text articles, you should keep it simple, readable.

columns

2. Layout

As I said before, we haver years of experience designing for screens, and this proposed layout is not more that a starting point of what can be done. If you are looking for more concrete examples, you just can go and surf the web, there are excellent typographic centric websites.

Layout

3. Behavior

Websites to the rescue again. We don’t need the page metaphor, we are used to scrolling content, pagination is not ideal too. And like the example here, you don’t need to learn new navigation tricks or gestures, or skim all the magazine to find what you are looking for.

Behaviour

4. Content

The content on an article is not anymore all what an reader wants form you, he or she, wants to read other user comments, comment they selfs and know about related online content.

Dynamic Content

5. Content Manipulation

The user must be able to own the content, not just read it passively. They have to be able to copy, annotate and share it.

Content Manipulation

6 – Advertising

This is a really tricky one, we don’t like ads, we want to read without being interrupted with blinking banners, pop-over flash animations, etc. One idea is to have inline ads that don’t interfere with us, we just have to scroll a little more to continue our reading.

Advertisement

So, what a reading app for iPad should have:

  1. One principal column layout
  2. Screen optimized and adjustable typography size
  3. Simple gestures interface
  4. Internet dynamic content
  5. Built in browser
  6. Sharing an annotating tools
    (copy, mail, instapaper, blog this, facebook like this, etc)
  7. Search function
  8. Non distractive advertisement
    (please forget about cluttering all the app with banners)

There are a lot of really great interactive designers dying for making the ideal app for magazines, with a lot more and greater ideas than the ones I’m putting here. Just don’t ignore the past fifteen years of Internet experience we have.

Revistas en el iPad ¿lo que la web no pudo?

Están surgiendo en la web varios demos de proyectos de revistas digitales para el iPad. Cada una tratando de explotar de diferentes maneras este llamado nuevo medio.

Lo curioso es en algunos casos no terminan de entender de que se trata este nuevo dispositivo y sus beneficios y diferenciales.

Se puede ver que lo que han realizado no es mas que un sitio web realizado en flash con alto contenido de video. No deja de ser muy llamativo, de alta calidad de producción y muy poco contenido. Como este ejemplo el cual solo posee unos pocos párrafos de texto, que tranquilamente podrían ser parte de un docento de texto de nomas de 5 Kb o de un email. Eso si con uno vaya a saber cuantos MBs de videos y animación. Este mismo tipo de error en la interpretación de un medio sucedió y continua sucediendo en la web.

Si las publicaciones no incluyen diferenciadores importantes para los usuarios en la manera que estos puedan interactuar con la información (y no con las animaciones) no habrá nada que los detenga de acceder de manera gratuita en la web a los mismos contenidos (recordar que el ipad trae consigo su propio navegador) o desde otras aplicaciones que hayan puesto la experiencia del usuario como eje principal en el consumo, uso y manipulación de los contenidos.

Sports Illustrated ha publicado su prototipo de aplicación para iPad, la cual esta muy bien realizada, y contiene varios elementos propios del dispositivo con el que se visualiza. Pero lo que no se entiende, es que, si realmente querían realizar algo así, porque esperar a un dispositivo muchas veces menos potentes que un computador de escritorio, o una notebook para realizarlo y tener un sitio web con una experiencia de uso similar a otras publicaciones teniendo la posibilidad de desarrollar semejante producto con tecnologías web que obviamente los ubicaría como líderes del segmento.

La real posibilidad de innovar en interfaces, lectura y manejo de información es posible, y desde hace tiempo, en la web. Lo que ofrece el iPad, por lo que los medios están tan ansiosos de desarrollar versiones de sus publicaciones para este dispositivo, es la barrera artificial que impone el modelo de adquisición. Mientras que en la web no han sabido generar diferenciadores para que se acceda a sus contenidos luego de pagar por ellos, encontraron en el iPad que alguien mas se había encargado de hacerlo.

La prensa en la era digital

La crisis actual de los medios impresos debido al advenimiento de la distribución digital esta llegando a un punto de inflexión donde, debido mayormente a la inacción o incomprensión del cambio. se afronta una situación extrema donde el cierre se esta tornando en denominador común.

Se esta poniendo muy difícil para la prensa adecuarse a este escenario, que ya no es nuevo para la velocidad de los cambios que posee esta era digital. La gratuidad del acceso a la información, uno de los ejes de atracción para los internautas, no fue debidamente interpretada.

En un contexto donde el acceso a la información se ha inclinado mayoritariamente a Internet, al momento de cerrar balances, los medios encuentran difícil sostener la estructura que poseen, ya que el modelo de negocios basado en la gratuidad del acceso sustentado por publicidades en banners no logra equiparar la enorme disminución de ingresos de su área de distribución impresa.

El paso primero que ha tomado la industria fue unificar las redacciones de lo que era en su momento dos unidades independientes. Un intento tímido de reparar el error inicial de tratar a la versión digital como un pequeño hobbie.

Lo que no se han planteado seriamente es generar un plan de negocios que haga de esta unión un proyecto rentable. Se han olvidado de analizar que los ingresos actuales de la versión digital, sumado a la creciente baja de venta del diario en papel, pudiera cubrir los costos de mantener un una estructura que ellos mismos han ampliado y complejizado.

El futuro es digital, no se puede evitar ni luchar contra él. Solo requiere un cambio generacional para que el medio impreso termine de desaparecer. La nueva generación del facebook y myspace, acostumbrados a consumir contenidos de manera digital optarán preferentemente por nuevas tecnologías.

Esto presenta un gran desafío para la distribución en papel. Pero se vislumbran ciertos ápices de cambio en la dirección correcta.

Que tiene de particular leer el diario en papel?

El principal mérito del diario en papel es su comodidad para leer, liviano, plegable, manejable, no requiere electricidad y funciona en casi cualquier condición lumínica. Estos atributos hacen del placer de leer (tanto diarios como libros) una experiencia imposible de replicar en una computadora.

En pos de mejorar la experiencia y comodidad de lectura y el acceso a la información han surgido algunas alternativas. Entre ellas se destaca el rss. Una manera sencilla de que los contenidos lleguen a uno en lugar de tener que navegar por varios sitios. Por medio de una aplicación, tanto de escritorio, online o móvil, uno puede suscribirse a los contenidos de varios sitios, inclusive puede uno solo elegir contenidos particulares, como por ejemplo solo la sección internacionales de un diario y la económica de otro.

Otra solución en esta línea, pero orientada a facilitar la comodidad de lectura en pantalla, es el New York Times reader, un programa que nos presenta las noticias en columnas, en tamaños tipográficos grandes y sin scroll, sino que paginadas. Además guarda de manera local los contenidos pare que funcione en caso de no tener conexión o querer hacer una búsqueda histórica. Lo particular de este servicio es que no es gratuito, su costo esta basado en una suscripción de u$s3 mensuales.

Esta aplicación de nyt no es un intento aislado sino un hito que marca el camino que las publicaciones van a seguir en la distribución digital.

La evolución de la tecnología esta cerrando esta brecha con la tinta digital, utilizado en los ebook readers como los desarrollados por Sony y Amazon. Estos dispositivos han evolucionado enormemente desde su primera aparición. Hoy son mas rápidos, poseen mejor calidad de imagen y conexiones inalámbricas.

La entrada al mercado del iPad marca otro cambió para las publicaciones impresas, se trata de un dispositivo que no solo permite leer libros, sino que permite un nivel de interactividad y flexibilidad que los ereaders no permiten, sumado al ya exitoso iTunes Store, logrará mejorar la experiencia de consumo de información.

Estos ecosistemas cerrados son una oportunidad para los medios impresos, donde pueden lograr sustentabilidad por suscripción, dándole al usuario, como valor agregado, una experiencia de lectura mejorada.

Con estos dispositivos y el modelo de negocios finalmente los medios impresos pueden encontrar un camino a la distribución digital.

Amazon era el indicado para empujar esta nueva tecnología. Y en lugar de depender de un tercero como Sony, desarrollo su propio lector de tinta digital. Utilizo una estrategia comercial similar a la que utilizó Apple con sus ipods e iTunes store, logro armar un ecosistema en el cual controla de punta a punta la experiencia el usuario. Fue una movida muy inteligente integrar conexión inalámbrica 3G sin costo para el usuario en sus dispositivos para poder adquirir sus productos.

Y esta quedando de lado la publicidad, la cual puede integrarse de maneras mucho mas efectivas, originales y menos intrusivas que en la web, pudiendo llevarla a ingresos iguales o superirores a los que se obtiene por los canales impresos.

Pero un dispositivo y un modelo de negocios no basta para tener una publicación exitosa. Estas corporaciones con sus orígenes de hace mas de 100 años deben incorporar la visión joven y moderna para poder adaptar sus contenidos a estos medios. Est estapa no es la misma que el pasaje del papel a la web.

Esta vez se trata no solo de proveer la información, sino de mejorar e innovar en la experienia del usuario al interactuar con la publicación, de la integración con Internet, con vídeos, con la Información de ultimo momento, con las redes sociales, y con la manipulación de esa información.

Es el momento de pensar en el usuario, y por medio de ese pensamiento lograr en cambio dicerenciador en la experiencia de uso de la información en la nueva era digital.