Header Ads Widget

Ticker

6/recent/ticker-posts

Hermoso diseño de interfaz de usuario para portales de desarrolladores de API

 

Beautiful_Design_for_API_developer_portals_nordic_APIs

Cuando pensamos en interfaces de programación de aplicaciones (API), es posible que no las emparejemos inmediatamente con el diseño de la interfaz de usuario. Implementadas como una herramienta de fondo, las API están en gran parte en manos de los desarrolladores, y la documentación técnica tiene una reputación natural de ser esquiva para los legos.

Sin embargo, esta mentalidad no es sostenible. La interfaz de usuario (UI) es el componente gráfico de su API, una potente interfaz para su servicio que debe ser una hermosa exhibición de productos. Mientras que un buen diseño establece la marca y la confianza, un diseño deficiente puede tener efectos perjudiciales rápidamente.

Un estudio encontró que los visitantes evalúan el atractivo visual de un sitio en 50 milisegundos . La investigación de la Universidad de Missouri concluyó de manera similar que los usuarios se forman una impresión de un sitio web en dos décimas de segundo y que se necesitan aproximadamente "2.6 segundos para que los ojos de un usuario lleguen a esa área de un sitio web que más influye en su primera impresión".

Dado que la 'API' se extiende más allá de las conversaciones exclusivas para desarrolladores , lo que atrae el interés del empresario, diseñador web o director ejecutivo, muchas partes ven el portal para desarrolladores como una ubicación donde los proveedores de API ofrecen una introducción de su servicio al mundo. Este sitio será inmediatamente criticado al igual que cualquier otra página de producto. Como este es el caso, es una gran idea armarse con un diseño excelente. En este artículo, exploramos la arquitectura del sitio de calidad, la interacción, el diseño y la marca que pueden hacer que su página de inicio de API se sienta actual y fácilmente comprensible para todos los usuarios.

El diseño no se trata de hacer las cosas bonitas

Como primer punto de contacto, los principales objetivos de un portal para desarrolladores de API son atraer nuevos usuarios e incorporarse a 'Hello World'. Para lograr esto, un centro de desarrollo debe ser utilizable, producir código real y mantener un diálogo con el visitante. Según Kemie Guaida , diseñador de la consultora de API Dopter , los portales de API diseñados con éxito son más que atractivos visualmente, son:

  • Comprensible : los parámetros se entienden fácilmente
  • Utilizable : interactivo con arquitectura intuitiva
  • Atractivo : crea una experiencia agradable
  • De marca : refleja constantemente la marca.

El suministro de información técnica es una experiencia esencial para el desarrollador , pero Guaida nos recuerda que todo tipo de usuarios pueden estar visitando el portal del desarrollador, por lo que se debe acentuar la capacidad de aprendizaje y la presentación. Ahora, cubriremos tres inquilinos centrales del diseño y cómo se aplican a las API, y mostraremos ejemplos de algunos portales de desarrolladores de API bien diseñados que cualquier programa de desarrollo puede modelar.


Vea a Kemie Guaida presentarse sobre este tema en un evento de API nórdicas. Diapositivas .

3 elementos del diseño de software

Aquí hay algunos puntos prácticos dirigidos a los no diseñadores que pueden no tener Photoshop o Illustrator. Ya sea que estemos hablando de una aplicación web interactiva o una pantalla de aplicación móvil, un buen diseño de software es un puente perfecto entre el ser humano y la máquina . Tres principios a tener en cuenta durante todo el proceso de diseño de software son:

  1. Arquitectura informacional
  2. Interfaz de usuario
  3. Diseño visual

1: Arquitectura de la información

Al diseñar la arquitectura de la información para todo el sitio , es importante tener en cuenta la prioridad de la información que el visitante del sitio necesita saber. Se debe considerar qué información desean ver los desarrolladores de inmediato y qué recursos necesitarán los visitantes con diferentes niveles de experiencia.

Proporcionar documentación detallada es imprescindible para una audiencia técnica, y su audiencia no técnica requerirá información sobre acuerdos de licencia, un aspecto a menudo desfavorecido. En consecuencia, su estructura debe agrupar la información relevante en categorías que sean fácilmente comprensibles y fáciles de encontrar. Es una buena idea ordenar las secciones de lo amplio a lo específico , asegurándose de tener rutas claras a la información y una buena búsqueda por palabra clave u opción de tema disponible.

Como ejemplo, tome el portal de la API de MailChimp . Da prioridad a la información muy pertinente con un recordatorio del lanzamiento de la versión v3.0 y un aviso de obsolescencia. También hace un buen trabajo al estructurar la información en orden de principiante a avanzar, ordenando secciones desde Comenzar -> Cómo hacer -> Descargas y envoltorios de API -> Documentación de API real. Los enlaces que pueden ser irrelevantes para la mayor parte de los visitantes del sitio, como las API de socios o el servicio Mandrill de MailChimp, todavía se incluyen, pero se enumeran en la parte inferior de acuerdo con la prioridad.

“Una buena interfaz debe ser clara para cualquier tipo de usuario. Un principiante debería poder entrar en su portal y entenderlo de la misma manera que un usuario súper técnico "

MailChimp-API-Docs-API nórdicos

MailChimp utiliza una buena arquitectura de sitio para solicitar información

2: interfaz de usuario

La interfaz de usuario es donde el ser humano interactúa con la información que se le presenta. Un diseñador debe lanzarse a la psicología del usuario, considerando que al visitar un sitio por primera vez, un usuario necesita saber qué puedo hacer y cómo puedo hacerlo . Para saciar inmediatamente estas preguntas, diseñe con:

  • Coherencia : hacer que las cosas se vean y se comporten de la misma manera. Si tiene un formulario de búsqueda, por ejemplo, hágalo siempre en el mismo lugar de la página. Siga las convenciones y especialmente las reglas que cree.
  • Claridad : el texto es parte de la interfaz. Al nombrar los parámetros, utilice terminología que los usuarios comprendan. Considere su tono general: ¿su documentación será seca y directa, o liviana y divertida? Elija un tono y sea coherente en toda la documentación de su API.

Para planificar un flujo de interfaz de usuario, se debe esbozar una estructura alámbrica para considerar los componentes clave de cada página. Esto se puede hacer primero dibujando cuadros y texto ficticio en lápiz y papel o pizarra. Se pueden generar maquetas o wireframes interactivos utilizando software como Balsamiq , Axure , InDesign , Briefs , prototipos HTML o el marco Bootstrap.

Con el software disponible, es relativamente fácil estructurar un prototipo semifuncional. Para tener una idea de cómo funcionan realmente las cosas, anime a los usuarios a realizar pruebas para obtener información valiosa y comentarios sobre el portal de desarrollo antes del lanzamiento.

Las fuentes llamativas y majestuosas acentúan la interfaz de usuario del centro de desarrollo de Twilio

Las fuentes atrevidas y majestuosas acentúan la elegante interfaz de usuario del centro de desarrollo de Twilio

3: Diseño visual

El diseño visual es posiblemente el más obvio para cualquier lector. Las imágenes y los gráficos tienen que ver con la apariencia, una experiencia más subjetiva sobre cómo el usuario percibe la interfaz. ¿Es ligero, aireado, tecnológico o clásico? Todo esto tiene que ver con tu marca. Los métodos relevantes utilizados en el diseño visual incluyen:

  • Disposición : cómo se colocan las cosas entre sí.
  • Jerarquía : use colores, tamaño de fuente o tipo de fuente para hacer que los títulos importantes se destaquen, en oposición al texto del cuerpo. Para los portales de API con mucha información y funcionalidad, no todo puede ser plano, ya que eso solo aumentará la confusión.
  • Agrupación : agrupe cosas que sean similares en funcionalidad o contenido. Las formas, los colores o los espacios en blanco consistentes manipulan el cerebro para relacionar automáticamente las cosas como una unidad.
  • Estética : aunque la documentación de la API debe priorizar la legibilidad y la claridad, los colores, las tipografías, las cuadrículas y más deben considerarse y ser consistentes con la marca de la empresa.
  • Rejillas : tienen un sistema de red utilizando la agrupación, y crear unidades para colocar alrededor página.

Para ver un ejemplo de excelente diseño visual, considere la página de API de Campaign Monitors . La página utiliza iconos gráficos sutiles, un título grande y un tono azul claro que resalta la barra de navegación. El uso de una cuadrícula con mucho espacio en blanco hace que la página se vea ordenada, bien estructurada y profesional.

La página de la API de Campaign Monitors muestra un estilo de calidad

La página de la API de Campaign Monitors presenta un estilo y una estructura atractivos

Proceso: ¿Cómo obtengo este diseño?

Es probable que los proveedores de API tengan diseñadores y desarrolladores internos que puedan implementar portales de API de gran apariencia. Pero recuerde que no tiene que reinventar la rueda: algunos servicios de administración de API y formatos de especificación ya proporcionan documentación interactiva de API. El uso de programas que crean documentación automáticamente puede inhibir la personalización, así que elija soluciones que permitan entradas CSS únicas que coincidan con su marca. Quizás aún, lo que necesita el espacio de la API es una mejor documentación de la API y opciones de implementación de la interfaz de usuario .

Publicación de blog de libro electrónico de seguridad CTA 2

Conclusión: lista de verificación final

Se pueden utilizar diferentes estilos de diseño para las API dirigidas a diferentes públicos . El diseño empresarial puede utilizar texto estable, en blanco y negro, mientras que la marca de MailChimp es más joven y brillante, lo que refleja su clientela de inicio. Independientemente, una interfaz de usuario de calidad es universal para cualquier tipo de visitante.

Como revisión, al diseñar portales de API, considere los siguientes elementos principales:

  • Tenga la información correcta y la estructura correcta . El portal para desarrolladores es más que documentación de referencia y debe ser comprensible para todo tipo de usuarios.
  • ¿Es fácil interactuar con él? Realice pruebas de usuario en su portal de API, vea lo fácil que es navegar.
  • Asegúrese de que refleje la marca . Es más probable que las personas sean usuarios recurrentes de una interfaz visualmente atractiva y coherente con la marca de la empresa.

El diseño del portal de API consiste en involucrar a los usuarios con su API . Se trata de interactuar con la marca y generar entusiasmo para consumir su API como un activo en su caja de herramientas de productividad. Al final, el aumento de la experiencia del desarrollador con un hermoso diseño de interfaz de usuario inicia una conversación orgánica que mejora las posibilidades de éxito general con los usuarios desarrolladores recurrentes.

“Una API que tiene usuarios felices es una API que prosperará. Es una API con usuarios que no solo la usarán, sino que hablarán de ella y la recomendarán ”

Publicar un comentario

0 Comentarios