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