INTERACCIÓN Y EXPERIENCIA DE USUARIO

End-user development

End-User Programming

3.1 End-User Programming

De utilizar a crear

01Necesidad propiaDetectar un problema

→

02ConstrucciónAdaptar una herramienta

→

03SoluciónProbar en contexto

END-USER DEVELOPMENT

Los usuarios más avanzados suelen necesitar poder personalizar o ampliar las aplicaciones que manejan. Por ejemplo: Organizar recetas de cocina con Airtable.

END-USER DEVELOPMENT

Algunos programas y apps pueden tener un cierto grado de libertad para configurar su comportamiento. Otros son cajas herméticamente cerradas a las que un usuario avanzado puede querer modificar de su comportamiento.
Si no hay un botón que haga exactamente lo que el usuario quiera, su única alternativa es pedírselo al desarrollador del programa (al que le puede resultar conveniente hacerlo o no, y si lo hace normalmente querrá cobrar por ello).

END-USER DEVELOPMENT

Esta es una reclamación tradicional de los defensores del software libre y FLOSS (Free and Libre Open Source). En la práctica, reconstruir una aplicación y modificarla a partir del código fuente requiere un esfuerzo y exige habilidades avanzadas de desarrollo de software.

END-USER DEVELOPMENT

Algunas herramientas permiten plugins que se ejecutan dentro de la aplicación principal para hacer las ampliaciones o modificaciones.
Otras herramientas ofrecen una Application Programming Interface (API) para que los desarrolladores puedan hacer esas ampliaciones desde fuera y dejen a la aplicación principal hacer el resto.

END-USER DEVELOPMENT

El software debería ser ampliable y extensible de una forma más fácil y rápida, para que cualquier usuario final o end-user pueda automatizar, personalizar o construir su propia herramienta a partir de una dada. Para ello necesitan un lenguaje de End-User Development (EUD).

END-USER DEVELOPMENT

El objetivo de la HCI/HMI pasa de hacer sistemas fáciles de usar a hacer sistemas fáciles para desarrollar
Desafío ⇒ construir sistemas que permitan a usuarios sin conocimientos de programación combinar de forma creativa artefactos hechos de software
Combinación de artefactos ⇒ crear, modificar y ampliar artefactos software
Los end-users no son desarrolladores profesionales

END-USER DEVELOPMENT

Definición de EUD (Lieberman et al. 2006)

A set of methods, techniques, and tools that allow users of software systems, who are acting as non-professional software developers, at some point to create, modify, or extend a software artifact

— H. Lieberman et al.
End-User Development: An Emerging Paradigm

END-USER DEVELOPMENT

Algunos ejemplos de EUD

UNIX Pipes: For the love of pipes
Hojas de cálculo:
- Spreadsheets: A basis for end-user programming
- Spreadsheets are code.
La propia World Wide Web permite la creación de contenidos y aplicaciones personalizadas con HTML, CSS, Javascript, PHP, etc.
Programación visual en ingeniería: LabView

END-USER DEVELOPMENT

3.1 End-User Programming · Pregunta

¿Por qué end-user?

¿Por qué end-user?

El material para responder se desarrolla en «End-user programming».

End-User Programming

¿Por qué end-user?

End-User Programming

Hace falta un término que distinga al desarrollo/programación por parte del usuario del desarrollo/programación hecho por profesionales de ingeniería de software

End-User Programming

Los ingenieros de software profesionales construyen aplicaciones de propósito general diseñadas para ser empleadas por muchas personas
Los programadores end-user son usuarios avanzados, no necesariamente programadores profesionales, que modifican o crean herramientas ad hoc para su uso personal o para compartir con unos pocos colegas, todo lo más.

End-User Programming

Lectura recomendada

End-User Programming

Ink & Switch (2019). End-user programming

End-User Programming

¿Por qué algunos ingenieros prefieren Python y otros Excel?

End-User Programming

Calculation View: Representaciones múltiples de la edición en hojas de cálculo

End-User Programming

Python en Excel

End-User Programming

Microsoft ha incorporado Python en Excel en una versión preliminar para el programa insider del canal beta.

End-User Programming

Alternativas al texto: Representaciones accesibles y límites de la abstracción

Dan Vanderkam repasa HyperCard, Visual Basic, Interface Builder y hojas de cálculo como formas de acercar la creación de programas a más personas. Su defensa del texto no niega la utilidad de estas herramientas: pregunta por qué el código textual sigue siendo importante al construir y mantener sistemas complejos.
Vídeo: Why Source Code is Always Text: alternativas al texto, desde 14:30.
Propuesta de actividad: elegir una herramienta visual y comprobar cómo representa los eventos, las relaciones entre componentes y las operaciones que no pueden expresarse mediante sus controles.

3.1 End-User Programming · Pregunta

¿Por qué algunos ingenieros prefieren Python y otros Excel?

El material para responder se desarrolla en «End-user programming».

End-User Programming

¿Por qué end-user?

End-User Programming

Hace falta un término que distinga al desarrollo/programación por parte del usuario del desarrollo/programación hecho por profesionales de ingeniería de software

End-User Programming

Los ingenieros de software profesionales construyen aplicaciones de propósito general diseñadas para ser empleadas por muchas personas
Los programadores end-user son usuarios avanzados, no necesariamente programadores profesionales, que modifican o crean herramientas ad hoc para su uso personal o para compartir con unos pocos colegas, todo lo más.

End-User Programming

Lectura recomendada

End-User Programming

Ink & Switch (2019). End-user programming

End-User Programming

¿Por qué algunos ingenieros prefieren Python y otros Excel?

End-User Programming

Calculation View: Representaciones múltiples de la edición en hojas de cálculo

End-User Programming

Python en Excel

End-User Programming

Microsoft ha incorporado Python en Excel en una versión preliminar para el programa insider del canal beta.

End-User Programming

Alternativas al texto: Representaciones accesibles y límites de la abstracción

Dan Vanderkam repasa HyperCard, Visual Basic, Interface Builder y hojas de cálculo como formas de acercar la creación de programas a más personas. Su defensa del texto no niega la utilidad de estas herramientas: pregunta por qué el código textual sigue siendo importante al construir y mantener sistemas complejos.
Vídeo: Why Source Code is Always Text: alternativas al texto, desde 14:30.
Propuesta de actividad: elegir una herramienta visual y comprobar cómo representa los eventos, las relaciones entre componentes y las operaciones que no pueden expresarse mediante sus controles.

3.1 End-User Programming

End-user programming

01UsuarioConoce la tarea

→

02ProgramaExpresa la solución

→

03Uso realVerifica el resultado

End-User Programming

¿Por qué end-user?

End-User Programming

Hace falta un término que distinga al desarrollo/programación por parte del usuario del desarrollo/programación hecho por profesionales de ingeniería de software

End-User Programming

Los ingenieros de software profesionales construyen aplicaciones de propósito general diseñadas para ser empleadas por muchas personas
Los programadores end-user son usuarios avanzados, no necesariamente programadores profesionales, que modifican o crean herramientas ad hoc para su uso personal o para compartir con unos pocos colegas, todo lo más.

End-User Programming

Lectura recomendada

End-User Programming

Ink & Switch (2019). End-user programming

End-User Programming

¿Por qué algunos ingenieros prefieren Python y otros Excel?

End-User Programming

Calculation View: Representaciones múltiples de la edición en hojas de cálculo

End-User Programming

Python en Excel

End-User Programming

Microsoft ha incorporado Python en Excel en una versión preliminar para el programa insider del canal beta.

End-User Programming

Alternativas al texto: Representaciones accesibles y límites de la abstracción

Dan Vanderkam repasa HyperCard, Visual Basic, Interface Builder y hojas de cálculo como formas de acercar la creación de programas a más personas. Su defensa del texto no niega la utilidad de estas herramientas: pregunta por qué el código textual sigue siendo importante al construir y mantener sistemas complejos.
Vídeo: Why Source Code is Always Text: alternativas al texto, desde 14:30.
Propuesta de actividad: elegir una herramienta visual y comprobar cómo representa los eventos, las relaciones entre componentes y las operaciones que no pueden expresarse mediante sus controles.

Vídeos recomendados

Alternativas al texto: Representaciones accesibles y límites de la abstracción

Why Source Code is Always Text | Dan Vanderkam

SquiggleConf

Why Source Code is Always Text: alternativas al texto, desde 14:30

Computational Thinking

3.2 Computational Thinking · Pregunta

¿Recuerdan a Vannevar Bush?

¿Recuerdan a Vannevar Bush?

El material para responder se desarrolla en «Pensamiento computacional».

Computational Thinking

Los entornos y lenguajes de EUD ofrecen la capacidad de crear con una herramienta, más allá de la capacidad de usar una herramienta.

Computational Thinking

On Computing… (Rosembloom 2013)

[…] incorporates both understanding (as is the focus in most traditional science) and shaping (as is the focus in engineering and other professions)

— Paul Rosenbloom
On Computing: The Fourth Great Scientific Domain

Computational Thinking

Pero para poder crear y desarrollar software, hacen falta unos mínimos conocimientos y habilidades sobre los conceptos básicos sobre lo que un ordenador puede hacer, cómo lo hace y cómo instruirlo para que lo haga. Esto es el terreno del pensamiento computacional o computational thinking subyacente al Computing (en español, traducido por "Informática").

Computational Thinking

Computational thinking (Wing 2006)

Computational Thinking involves solving problems, designing systems, and understanding human behavior, by drawing on the concepts fundamental to computer science.

Computational thinking is a fundamental skill for everyone, not just computer scientist […]; involves solving problems, designing systems, and understanding human behaviour, by drawing on the concepts fundamental to CS […]; is thinking recursively. It is parallel processing […]; is using abstraction and decomposition when […] designing a large complex system […]; is thinking in terms of prevention, protection, and recovery from worst-case scenarios […]; is using heuristic reasoning to discover a solution.

— J. Wing
Computational Thinking -- Communications of the ACM

Computational Thinking

¿Recuerdan a Vannevar Bush?

Computational Thinking

Visionario del computational thinking

Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client’s interest. The physician, puzzled by a patient’s reactions, strikes the trail established in studying an earlier similar case, and runs rapidly through analogous case histories, with side references to the classics for the pertinent anatomy and histology. The chemist, struggling with the synthesis of an organic compound, has all the chemical literature before him in his laboratory, with trails following the analogies of compounds, and side trails to their physical and chemical behavior.

— Vannevar Bush
As We May Think

Computational Thinking

Lectura recomendada

Computational Thinking

Evan W. Patton, M. Tissenbaum & F. Harunani (2018). MIT App Inventor: Objectives, Design, and Development, en Computational Thinking Education, SpringerOpen, DOI:10.1007/978-981-13-6528-7 (También disponible en MIT App Inventor.pdf)

Computational Thinking

Complejidad: poder razonar sobre lo construido

Peter van Hardenberg separa dificultad y tamaño de la complejidad producida por interacciones entre partes. El problema aparece cuando resulta difícil anticipar cómo se comportará el conjunto. Para el EUD, una herramienta fácil de empezar no garantiza que el usuario pueda comprender una solución grande.
El autor propone, entre otras estrategias, reducir el alcance y trabajar con plataformas acotadas. Se trata de una decisión de diseño: dedicar esfuerzo a una solución pequeña y comprensible, en lugar de incorporar todas las posibilidades.
Vídeo: Why Can’t We Make Simple Software?; definición desde 1:40 y reducción de alcance desde 33:20.

3.2 Computational Thinking

Pensamiento computacional

01DescomponerDividir el problema

Separar una tarea compleja en problemas manejables.

→

02AbstraerElegir lo relevante

Conservar los datos y relaciones que necesita la solución.

→

03AlgoritmoOrdenar los pasos

Definir una secuencia de operaciones que pueda ejecutarse.

→

04EvaluarProbar y corregir

Observar el uso y valorar la experiencia de las personas.

Computational Thinking

Los entornos y lenguajes de EUD ofrecen la capacidad de crear con una herramienta, más allá de la capacidad de usar una herramienta.

Computational Thinking

On Computing… (Rosembloom 2013)

[…] incorporates both understanding (as is the focus in most traditional science) and shaping (as is the focus in engineering and other professions)

— Paul Rosenbloom
On Computing: The Fourth Great Scientific Domain

Computational Thinking

Computational thinking (Wing 2006)

Computational Thinking involves solving problems, designing systems, and understanding human behavior, by drawing on the concepts fundamental to computer science.

Computational thinking is a fundamental skill for everyone, not just computer scientist […]; involves solving problems, designing systems, and understanding human behaviour, by drawing on the concepts fundamental to CS […]; is thinking recursively. It is parallel processing […]; is using abstraction and decomposition when […] designing a large complex system […]; is thinking in terms of prevention, protection, and recovery from worst-case scenarios […]; is using heuristic reasoning to discover a solution.

— J. Wing
Computational Thinking -- Communications of the ACM

Computational Thinking

¿Recuerdan a Vannevar Bush?

Computational Thinking

Visionario del computational thinking

Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client’s interest. The physician, puzzled by a patient’s reactions, strikes the trail established in studying an earlier similar case, and runs rapidly through analogous case histories, with side references to the classics for the pertinent anatomy and histology. The chemist, struggling with the synthesis of an organic compound, has all the chemical literature before him in his laboratory, with trails following the analogies of compounds, and side trails to their physical and chemical behavior.

— Vannevar Bush
As We May Think

Computational Thinking

Lectura recomendada

Computational Thinking

Evan W. Patton, M. Tissenbaum & F. Harunani (2018). MIT App Inventor: Objectives, Design, and Development, en Computational Thinking Education, SpringerOpen, DOI:10.1007/978-981-13-6528-7 (También disponible en MIT App Inventor.pdf)

Computational Thinking

Complejidad: poder razonar sobre lo construido

Peter van Hardenberg separa dificultad y tamaño de la complejidad producida por interacciones entre partes. El problema aparece cuando resulta difícil anticipar cómo se comportará el conjunto. Para el EUD, una herramienta fácil de empezar no garantiza que el usuario pueda comprender una solución grande.
El autor propone, entre otras estrategias, reducir el alcance y trabajar con plataformas acotadas. Se trata de una decisión de diseño: dedicar esfuerzo a una solución pequeña y comprensible, en lugar de incorporar todas las posibilidades.
Vídeo: Why Can’t We Make Simple Software?; definición desde 1:40 y reducción de alcance desde 33:20.

Vídeos recomendados

Complejidad: poder razonar sobre lo construido

Why Can't We Make Simple Software? - Peter van Hardenberg

Handmade Cities

Low code

3.3 Low code

Low code

Configuración visualComponer lo habitual

Combinar componentes y ajustar sus propiedades.

CódigoResolver lo específico

Expresar operaciones que la configuración no cubre.

Low code

El low code es una evolución del EUD, que permite a los usuarios crear aplicaciones sin necesidad de escribir mucho código.

Low code

Algunos ejemplos de lenguajes de low code son:

Low code

Microsoft PowerApps
Google AppSheet (sucesor de App Maker)
Apple SwiftUI / Swift Playgrounds
Oracle Visual Builder y Oracle APEX
Salesforce Lightning
Mendix
GeneXus
OutSystems

Low code

Low code: Poder bajar de nivel cuando la herramienta no basta

Vanderkam advierte de las abstracciones que dejan escapar detalles: un editor visual puede simplificar lo habitual, pero una excepción puede exigir comprender tanto la herramienta como el código que genera. La selección de una plataforma debe considerar esa posibilidad y la forma de revisar sus cambios.
Vídeo: Why Source Code is Always Text: abstracciones y herramientas, desde 20:40.
Propuesta de actividad: documentar una operación resuelta visualmente y otra que obliga a recurrir al código.

Vídeos recomendados

Low code: Poder bajar de nivel cuando la herramienta no basta

Why Source Code is Always Text | Dan Vanderkam

SquiggleConf

Why Source Code is Always Text: abstracciones y herramientas, desde 20:40

Embodiment o Encarnación

3.4 Embodiment o Encarnación · Pregunta

¿Excel usa alguna encarnación?

El material para responder se desarrolla en «Embodiment: pensar con el cuerpo».

Embodiment o Encarnación

Una de las partes más difíciles de la construcción de software es que requiere que el programador mantenga varias abstracciones en su mente. El programador debe comprender el dominio del problema, modelar las estructuras de datos y el flujo del programa, y finalmente trasladar todo a una representación simbólica (código en un lenguaje).

Embodiment o Encarnación

La capacidad de razonamiento abstracto y concentración exigida a un ingeniero de software para escribir software no es viable para alguien que solo quiere resolver su problema particular mediante el ordenador y que suele ser experto en otros dominios ajenos al de la programación.

Embodiment o Encarnación

Hacen falta formas que requieran menos razonamiento abstracto y menos capacidad mental para modelar los programas y los datos, dejando más capacidad para pensar en el dominio de la aplicación.

Embodiment o Encarnación

Una forma de hacer esto es el embodiment o encarnación, es decir, ofrecer al usuario final representaciones concretas para los elementos de un programa que funcione.

Embodiment o Encarnación

Las encarnaciones son normalmente visuales, pero también de otros tipos (auditivas, hápticas, etc.)

Embodiment o Encarnación

Ejemplos de Encarnaciones

Blockly: Encarnación gráfica (como bloques) en un lenguaje visual similar al usado por Scratch, App Inventor, etc.
Seymour: Encarnación (como código) de la salida de un programa
Bolt: Encarnación (gráfica) en un lenguaje visual de scripting para juegos en Unity

Embodiment o Encarnación

¿Excel usa alguna encarnación?

Embodiment o Encarnación

Calculation View: Encarnaciones múltiples de la edición en hojas de cálculo

Embodiment o Encarnación

3.4 Embodiment o Encarnación

Embodiment: pensar con el cuerpo

Embodiment o Encarnación

Hacen falta formas que requieran menos razonamiento abstracto y menos capacidad mental para modelar los programas y los datos, dejando más capacidad para pensar en el dominio de la aplicación.

Embodiment o Encarnación

Una forma de hacer esto es el embodiment o encarnación, es decir, ofrecer al usuario final representaciones concretas para los elementos de un programa que funcione.

Embodiment o Encarnación

Las encarnaciones son normalmente visuales, pero también de otros tipos (auditivas, hápticas, etc.)

Embodiment o Encarnación

Ejemplos de Encarnaciones

Blockly: Encarnación gráfica (como bloques) en un lenguaje visual similar al usado por Scratch, App Inventor, etc.
Seymour: Encarnación (como código) de la salida de un programa
Bolt: Encarnación (gráfica) en un lenguaje visual de scripting para juegos en Unity

Embodiment o Encarnación

¿Excel usa alguna encarnación?

Embodiment o Encarnación

Calculation View: Encarnaciones múltiples de la edición en hojas de cálculo

Embodiment o Encarnación

Hacen falta formas que requieran menos razonamiento abstracto y menos capacidad mental para modelar los programas y los datos, dejando más capacidad para pensar en el dominio de la aplicación.

Embodiment o Encarnación

Una forma de hacer esto es el embodiment o encarnación, es decir, ofrecer al usuario final representaciones concretas para los elementos de un programa que funcione.

Embodiment o Encarnación

Las encarnaciones son normalmente visuales, pero también de otros tipos (auditivas, hápticas, etc.)

Embodiment o Encarnación

Ejemplos de Encarnaciones

Blockly: Encarnación gráfica (como bloques) en un lenguaje visual similar al usado por Scratch, App Inventor, etc.
Seymour: Encarnación (como código) de la salida de un programa
Bolt: Encarnación (gráfica) en un lenguaje visual de scripting para juegos en Unity

Embodiment o Encarnación

¿Excel usa alguna encarnación?

Embodiment o Encarnación

Calculation View: Encarnaciones múltiples de la edición en hojas de cálculo

Embodiment o Encarnación

Volver

Programación literaria

3.5 Programación literaria

Programación literaria

01ExplicaciónPor qué y para quién

02CódigoCómo se ejecuta

Expresar operaciones que la configuración no cubre.

Programación literaria

Literate Programming: Invento de Donald Knuth en 1983
El código fuente se parece mucho más a un documento que a un listado de código
Bloques de código embebido en un documento
Genera un documento legible junto a código ejecutable

Programación literaria

Ejemplos de programación literaria

Jupyter: Entorno interactivo para crear notebooks, código y datos en una diversidad de lenguajes (Python, SQL, R, Matlab, etc.)

Programación literaria

Lectura recomendada

Programación literaria

Justin Worthe: Literate programming

Programación literaria

Especificación: Conservar la intención además del resultado generado

Sean Grove propone tratar la especificación escrita como un artefacto duradero. Guardar solo el código generado puede perder los objetivos y criterios que llevaron a él. La especificación permite discutirlos, revisarlos y relacionarlos con ejemplos que comprueban el comportamiento esperado.
Esto conecta con la programación literaria por el valor de preservar explicaciones, aunque son enfoques distintos: una especificación de comportamiento no es, por sí sola, un programa literario.
Vídeo: The New Code: conservar la especificación, desde 5:08.
Propuesta de actividad: acompañar una automatización de su propósito, restricciones y tres ejemplos de aceptación; comprobar si otra persona puede entenderla sin reconstruir toda la intención a partir del código.

Vídeos recomendados

Especificación: Conservar la intención además del resultado generado

The New Code — Sean Grove, OpenAI

AI Engineer

The New Code: conservar la especificación, desde 5:08

Especificación: Conservar la intención además del resultado generado

Sean Grove propone tratar la especificación escrita como un artefacto duradero. Guardar solo el código generado puede perder los objetivos y criterios que llevaron a él. La especificación permite discutirlos, revisarlos y relacionarlos con ejemplos que comprueban el comportamiento esperado.
Esto conecta con la programación literaria por el valor de preservar explicaciones, aunque son enfoques distintos: una especificación de comportamiento no es, por sí sola, un programa literario.
Vídeo: The New Code: conservar la especificación, desde 5:08.
Propuesta de actividad: acompañar una automatización de su propósito, restricciones y tres ejemplos de aceptación; comprobar si otra persona puede entenderla sin reconstruir toda la intención a partir del código.

Herramientas

3.6 Herramientas

Herramientas GUI

ElegirUn componente

→

ConfigurarSus propiedades

→

ProbarLa interacción

Herramientas GUI

Adobe XD: Diseño y prototipado
Balsamiq: Prototipado rápido
Figma: Diseño y prototipado; freemium
Lunacy: Diseño y prototipado; free
Penpot: Diseño y prototipado; ¡open source!

Herramientas GUI

Diseño asistido por IA: de la intención a pantallas revisables

El tutorial de UX Pilot recorre la definición de una idea, selección de funciones, ampliación de requisitos, diagramas, wireframes y pantallas. La intervención humana no termina al generar: el autor revisa propuestas, modifica elementos y conserva los prompts como parte de la documentación.
Vídeo: Design An App With AI — UX Pilot Tips & Tricks. Puntos de entrada: idea, 1:41, wireframes, 7:47 y documentación, 12:06.
Complemento: Demo of UX Pilot AI. Su descripción anuncia generación de diseños y edición conversacional.
Propuesta de actividad: conservar una propuesta inicial y una revisada, con una justificación de los cambios basada en la tarea del usuario.