Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones en...
-
Upload
nuria-ramoneda-aiguade -
Category
Internet
-
view
191 -
download
1
Transcript of Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones en...
Facilitemos el trabajo a losusuarios olvidados: backend
usable y manual deinstrucciones.
Núria Ramoneda WordCamp Barcelona - 2016@nuriarai
1 . 1
Licenciada en História Contemporánea en el 89
Desde el 96 desarrollando en MS Access, analista, gestora de proyectos...
En 2006 salto al entorno web: primeras webs en xhtml y css
Me interesa la usabilidad y la accesibilidad web: hago el máster de la UOCen "Tecnologías accesibles" entre el 2007-2009
Desde el 2012 freelance a tiempo completo maquetando y desarrollandowebs con y sin WordPress.
Núria Ramoneda Aiguadé @nuriarai
¿Quién soy?
1 . 2
Clientes pequeños y medianos
Profesionales, pequeñas empresas, centros de investigación,asociaciones, entidades...
Necesitan webs corporativas, webs de servicios, tiendas online,portafolios, revistas...
Según el presupuesto, se hacen diseños a medida o se adaptan themescomprados.
Mis clientes
1 . 3
Todos necesitan introduciry mantener su contenido con facilidad y
agilidad
Y no siempre lo consiguen!
1 . 4
La UX se centra en los usuarios del front-end
y se ha olvidado a menudo
de los usuarios del back-end
2 . 1
Los usuarios olvidados
“ We create words and imagery that engage our users.We put in place policies that ensure the content ourauthors create is optimised for user experience.
But someone forgot… authors are users, too. A differenttype, but users nonetheless. What about their experience?
Rich Yagodich, 2011
2 . 2
El auxiliar al que le corresponde introducir la información que laencargada de comunicación le va enviando.
Las personas que utilizan los CMS para introducir, editar,revisar, crear o modificar contenido en la web.
Las autoras de ese blog tan fantástico que les hemos desarrollado(psicólogas, nutricionistas, abogadas, traductoras, filósofas, escritoras…)
Los técnicos y científicos de la organización/institución que nos haencargado su nuevo sitio web, lleno de proyectos que empiezan yacaban, de miembros que entran y salen, de bibliografías (libros,autores), de eventos, de artículos….
¿Quienes son los usuarios olvidados?
2 . 3
Las autoras de un blog colaborativo que sólo quieren escribir su artículoperiódicamente.
Los diversos miembros de un equipo en un periódico o revista online:autor, editor, corrector...
La diseñadora o el arquitecto que necesita añadir un nuevo proyecto a suportafolio.
El encargado de introducir los productos, imágenes, precios,características, etc de una tienda online
El encargado de los comentarios, el community manager.
Y muchos más...
2 . 4
¿Qué sucede a veces cuando se ponen a hacer su trabajo?
2 . 5
AUTHORS OF THEWORLD, UNITE! REVOLTAGAINST BAD AUTHOREXPERIENCE
Título de un de Boris Kraft publicado enmayo de 2016 en CMSWire
artículo
2 . 6
Lo que queremos evitar...
2 . 7
“ Today, however, folks are starting to address thisproblem by focusing on “author experience,” which is theflipside to user experience. Just as basic UX principles tellus to help users achieve tasks without frustration orconfusion, author experience design focuses on the tasksand goals that CMS users need to meet—and seeks tomake it efficient, intuitive, and even pleasurable for themto do so.
Sara Wachter-BoettcherContent Everywhere: Strategy and Structure for Future-Ready Content, 2012
¿Qué pasa con los CMS, los usuarios y la UX?
¿Qué es la AX?
3 . 1
“ The true reason for having a CMS is to facilitate thehuman process of managing the content lifecycle fromcreation, through use, to archiving.
The principles of Author Experience start with the simplepremise that the author is the most important personwhen it comes to interacting with a content managementsystem.
Rich Yagodich, 2013
3 . 2
Tenemos que focalizarnos en el contenido y en la AX
“ Too many CMS’s are designed by people whounderstand coding, but with no grasp of how content isused. The people building most CMS’s do not deal in themessage. We need a CMS with the Author Experience atits core.
Rich Yagodich, 2013
3 . 3
Hagamos que los usuarios del backend de WordPress tenganuna mejor experiencia:
Facilitar el trabajo a autores, editores...Conseguir que lo hagan a gusto y bien Que no se pierdan en el backendQue no estropeen nadaQue mantengan la línea editorial establecidaQue mantengan la línea gráfica y el diseñoestablecidosQue se sientan en su casa (branding)
3 . 4
al usuario del backenda los usuarios que visitarán el sitio webal clientea nosotros
El resultado nos beneficia a todos
3 . 5
¿Qué quieren hacer los autores/editores?Crear páginas o artículos nuevosProgramar artículos para el futuroCrear nuevos CPT (cursos, salas, eventos, libros, autores...) Crear nuevas categorías o términos en taxonomíaspersonalizadas (nivel de baile, tipo de baile, barrio clases...)Duplicar páginas o CPTAñadir o modificar contenido en páginas o CPT existentesNavegar entre las páginas y los CPT para modificarrepetidamente (se nos olvidó poner el teléfono a todos losmiembros del centro)Buscar contenido para modificarlo, borrarlo o enlazarloAñadir nuevos items en el menúTraducir contenidoOrdenar contenidoNo quieren escribir HTML (algunos sí, otros no)...
4 . 1
Roles de usuarios
Roles reales y roles de WP
Autor (creador)Editor (varios sentidos)TraductorIntroductor (sólo introduce)Gestor de productoMarketer SEOWebmaster (gestiona configuración ycontenidos)Otros....
Según el tamaño del cliente algunosroles se superponen o no existen
Muchas veces los rolesstàndards de WP no sonsuficientes
AdministradorEditorAutorColaboradorSubscriptor
Roles WP por defecto
4 . 2
¿Qué deben poder hacer los autores/editores?
Equivocarse!
entre otras muchas cosas
4 . 3
¿Qué NO queremos que hagan los autores/editores?
Olvidar el modelo editorial (si lo hay)Usar colores, fuentes, tamaños que no están en la guia deestilos (explícita o implícitamente)Cambiar el diseño de la webPoner plugins sin controlLlamarnos a menudo porqué no saben cómo hacer algo
Romper la web!!
4 . 4
Algunas herramientas para ayudarles
4 . 5
Permite cambiar logo de página de loginPermite añadir widgets de texto en el dashboardPermite quitar widgets del dashboardPermite esconder los menús por defecto de WordPress para elrol de editor, aunque falla con Comentarios y Profile (no losesconde) (mejor no usarlo para ésto)
https://wordpress.org/plugins/white-label-cms/
Plugin - White Label CMS settings
Branding &dashboard
Inserta instruccionesclaras en el dashboardmediante este plugin o
registrandomanualmente widgets en
functions.php
add_action( 'wp_dashboard_setup', 'register_my_dashboard_widget' );function register_my_dashboard_widget() { wp_add_dashboard_widget( 'my_dashboard_widget', 'My Dashboard Widget', 'my_dashboard_widget_display' );}function my_dashboard_widget_display() { echo 'Put your instructions here';}
5 . 1
Plugin - Admin Menu Editor
Reordenar el menú como queramosEsconder/eliminar opciones de menú (para todos los roles)Añadir capacidades a cada menúAñadir separadores de menúCambiar nombres de menú/submenú
Admin Menu Editor PRO
Esconder/eliminar opciones de menú por roles -> muy útil!Importar/exportar menú
https://wordpress.org/plugins/admin-menu-editor/
Menús
5 . 2
Plugin - Adminimize
Escondeer/mostrar las opciones de la Tool BarPersonalizar textos en el footer del administradorEsconder/mostrar metaboxes de la pantalla de ediciónEsconder/mostrar el botón del editor de HTMLEsconder/mostrar opciones del editor rápido (QuickEdit) -> nopermite añadir opciones (ver ACF - Admins Column Pro)Esconder/mostrar widgets en el área de widgetsEsconder/mostrar secciones en cualquier área (help, screenoptions...)
https://wordpress.org/plugins/adminimize/
Menús,administración ybranding
Lo mismo que Admin Menu editor y además(todo por roles):
5 . 3
Plugin - User Role Editor
Suficiente para la mayoría de casosPermite marcar fácilmente los permisos de cada rolPermite crear nuevos roles y asignarles los permisos deseadosPermite asignar permisos específicos por usuarioIntegra los permisos definidos por otros plugins
https://wordpress.org/plugins/user-role-editor/
Roles ypermisos
5 . 4
Plugin - Press Permit Core
Derivado del conocido "Role Scooper"Control muy refinado de permisos por rolesPermisos a nivel de post y categoría
https://wordpress.org/plugins/press-permit-core/
Añadir permisos manualmente
https://codex.wordpress.org/Roles_and_Capabilities
function add_theme_caps() { // gets the author role $role = get_role( 'author' );
$role->add_cap( 'edit_others_posts' ); }add_action( 'admin_init', 'add_theme_caps');
Roles ypermisos
5 . 5
CPT
Organizar el contenido necesario con los CPTsapropiados.Crear CPT y sus taxonomías via plugin del repositorioo via plugin nuestro, pero no en el theme, para quesigan siendo visibles si el cliente cambia el tema (porlo menos en el backend)Nombrarlos adecuadamente para que el usuario losidentifique fácilmente (y en plural)Traducir los textos por defecto (All items, Add new...)Asignarles un icono específico y con sentidoOrdenar bien los ítems en el menú, sobretodo si es unCPT con muchas taxonomías, por orden de uso.
Contenido
Custom Post Type UI
Types
5 . 6
La bestia negra
Edición decontenidos
5 . 7
Mejorar la pantalla de edición
Quitar las meta boxes que el usuario no necesite al registrar CPT
https://codex.wordpress.org/Function_Reference/register_post_type
Edición decontenidos
Usar un plugin para los campos personalizados como ACF o Types,indicando para qué es cada campo y un ejemplo si es necesario
register_post_type('bailes', array( ...'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'page-attributes')));
Indicar los campos obligatorios y dar un mensaje comprensible si no seha rellenado el campo
Recordar a los usuarios que pueden esconder o mostrar algunas cajasmediante "Opciones de pantalla" (plugin )Seeing red
5 . 8
Personalizar el editor
Quitar los botones que no deben usar (colores, fuentes, tamaño defuente, subrayado, justificación...)
Edición decontenidos
Añadir los estilos que deben usar según el diseñoy/o la guía de estilos en el selector de formatos
Mover el selector de formatos y de encabezados ala primera línea
Si no se va a usar, deshabilitar el boton "añadirmedia"
5 . 9
Plugin - ACF y ACF Pro
Crear campos personalizados fácilmenteAsignarlos a Posts, Páginas y/o CPTOrganizarlos en columnas Esconder/mostrar metaboxes en la pantalla de ediciónBuena documentaciónAdd-ons muy útiles (integración con Admin Columns)
https://wordpress.org/plugins/advanced-custom-fields/!
Custom Fields
https://www.admincolumns.com/
5 . 10
Plugin - Admin Columns y ACF ProOrganizar los campos en columnas en las pantallas deadministraciónAñadir ordenación por los custom fields (Pro)Añadir filtros (Pro)Añadir campos a la edición rápida (quick edit) (Pro)Edición en línea de los campos de la columnas (Pro)
Administraciónde posts y CPT
https://www.admincolumns.com/https://wordpress.org/plugins/codepress-admin-columns/
Código - Añadir campos a quick edit conquick_edit_custom_box
https://www.sitepoint.com/extend-the-quick-edit-actions-in-the-wordpress-dashboard/
https://codex.wordpress.org/Plugin_API/Action_Reference/quick_edit_custom_box
5 . 11
CódigoAdministraciónde posts y CPT
add_action( 'manage_posts_custom_column' , 'custom_columns', 10, 2 );
function custom_columns( $column, $post_id ) { switch ( $column ) { case 'book_author': $terms = get_the_term_list( $post_id, 'book_author', '', ',', '' ); if ( is_string( $terms ) ) { echo $terms; } else { _e( 'Unable to get author(s)', 'your_text_domain' ); } break;
case 'publisher': echo get_post_meta( $post_id, 'publisher', true ); break; }}
manage_{$post_type}_posts_columnsAñadir columnas con
restrict_manage_posts
Añadir filtros con
5 . 12
Plugin - Category Order and Taxonomy Terms OrderOrdenar las taxonomías cómo intereseSe aplica a todas las queriesÚtil si no hay muchas categorías
Taxonomías
https://wordpress.org/plugins/taxonomy-terms-order/
Si hay muchos términos puede ser más práctico poner un campo orden con
ACF
Añadir campos a las taxonomías
Con ACF se añaden campos fácilmente o bien con código:
manage_{$taxonomy}_custom_columns
manage_edit-{$taxonomy}_columns
https://codex.wordpress.org/Plugin_API/Filter_Reference/manage_$taxonomy_id_columns
5 . 13
Qué más podemos hacer?
Añadir ayuda contextual dónde realmente sea interesanteDeshabilitar todo lo que no sea imprescindibleHacer que el editor de texto muestre los estilos principalesmediante Quitar el tab de HTML del editorDesarrollar las opciones del tema mediante la Customizer API Usar temas hijosUsar plantillas para las páginas
add_editor_style()
https://codex.wordpress.org/Theme_Customization_API
Crear un manual de instrucciones
5 . 14
¿Qué debe transmitir el manual?
Instrucciones específicas de uso del sitio
Modelo editorial (tipos de contenidos)
Modelo de estilos
Especificaciones de funcionalidades
Qué es WordPress
Especificaciones técnicas
Plantillas usadas (para las páginas)
6 . 1
Introducción
Qué es WordPressPorqué se usa WordPress para tu webQué contendrá este manual (y qué no)Dónde encontrar información de usuario de WordPress(EasyWPGuide [en inglés])
6 . 2
Tipos de contenidos
Por orden de importancia
Proyectos (CPT)Cursos (CPT)Personal (CPT)PáginasEntradas
De cada CPT definimos
Su propósitoSus taxonomíasLas relaciones con otros CPTsLos campos personalizadosSu introducción en el back-endSu visualización en el front-end
6 . 3
Funcionalidades específicas por secciones
Cuando la visualización de las entradas tiene unacasuística relevante y compleja hay que documentarsu programación, no sólo para las pruebas iniciales,sinó como recordatorio para los editores en el futuro.
6 . 4
En las opciones del tema
Funcionalidades generales
6 . 5
Funcionalidades específicas por secciones
Cuando se utilizan plugins externos como Addthishay que documentar los códigos de acceso y laslimitaciones, si las hubiere.
6 . 6
Cómo introducir contenido (paso a paso)
6 . 7
Cómo introducir contenido (paso a paso)
6 . 8
Cómo traducir contenido
Imprescindible explicar cómo hacerlo conWPML
Dar permisos de traducción desde WPMLUso del cambiador de idiomas superiorDuplicado de contenido al traducir
Idioma en el que estás tras el duplicadoCambiar a "Translate independently"
Media attachmentsTraducción de cadenas
6 . 9
Guía de estilo
Si hay una guía de estilos corporativa enlazarla Si se ha creado una guía de estilos específica paraeste sitio enlazarlaEn cualquier caso, indicar los estilos principales
FuentesGama cromáticaTamaños
Si hay estilos específicos para la edición delcontenido detallarlos
6 . 10
Tamaños y proporciones
Especificación de los tamaños generales que debentener las imágenes y de los recortes establecidos
6 . 11
Shortcodes
Si hemos creado shortcodes para algunafuncionalidad especial, debemos documentarlos
Los shortcodes nos permiten insertar maquetaciónincluso en editores visuales
6 . 12
Plantillas de páginas
Documentar las plantillas que se usan/deben usarpara las distintas páginas
El editor puede borrar sin quereruna página
Generalmente las plantillas nos permitenmaquetaciones complejas mediante programación
6 . 13
Documentación técnica
Tema padre (framework, starter theme...)Tema hijo
Pre-procesador usado (sass / less)Task-manager usado (grunt / gulp)
Plugins instalados
Lista de plugins y versión de cada uno
Servicios externos usados (Facebook, Twitter,Instagram, Eventbrite, AddThiss...)
6 . 14
Gracias!
Núria Ramoneda Aiguadé @nuriarai
Wordcamp Barcelona - 2016
¿Preguntas?
www.paddingzero.com
7