Frontend Archives - Software Evolutivo

UX: Experiencia de Usuario una Prioridad en el Desarrollo de Sistemas Organizacionales

Bryan Diaz — Thu, 27 Oct 2022 21:07:21 +0000

Actualmente, la compra o alquiler de sistemas dentro de las organizaciones a través de plataformas virtuales presenta un mayor índice de demanda, de modo que, gracias a la pandemia del COVID-19, los usuarios son más flexibles en sus acciones o tareas a la hora de buscar productos o servicios que deseen adquirir. Razón por la cual, para efectuar una buena negociación y una venta exitosa, se necesita brindarle a sus compradores una herramienta innovadora y una experiencia de usuario rápida, instantánea, y simple para cualquier tipo de dispositivo.

Si bien es cierto, al momento de desarrollar un sistema, tenemos en cuenta todos los lineamientos necesarios para que éste cumpla con los requerimientos del cliente; no obstante, nos hacemos preguntas como: ¿Qué tan difícil será su manejo?, ¿Será agradable para los usuarios? o ¿Estará clara la información plasmada o presentada?, en fin… un sinnúmero de preguntas que en la mayoría de los casos no consideramos de gran importancia al momento de desarrollar nuestro producto.

Es por ello que, a partir de esta iniciativa resulta de vital importancia considerar al UX como punto de partida indispensable en el desarrollo de un producto, de manera que, dicho término aparte de que se usa muy a menudo en el mundo tecnológico; es una prioridad en el desarrollo de sistemas, ya que gracias a ello los diseñadores ahora son más consciente de cómo su trabajo impacta al usuario y cuales son sus necesidades.Hay que destacar que, el trabajo del diseño de UX se centra en encontrar un equilibrio entre las necesidades del usuario, las necesidades comerciales y las capacidades técnicas, de manera que hallar el balance perfecto crea una experiencia de usuario beneficiosa y le permite al negocio alcanzar sus objetivos.

¿Qué es UX o Experiencia de Usuario?

Nielsen Norman Group, empresa estadounidense de consultoría en interfaz de usuario (UI) y experiencia de usuario define a UX como una de las experiencias de usuario más completas que coexisten a nivel global, puesto que que incluye todos los aspectos de la interacción del usuario final con la empresa, con sus servicios y con sus productos. Por ello, su término se menciona con mayor frecuencia en áreas relacionadas con tecnología, tales como teléfonos inteligentes, computadoras, software o sitios web. Se debe tener presente que, la experiencia del usuario no es solo un campo bastante nuevo, sino también un área volátil, ya que, cambia rápidamente debido a los avances tecnológicos, los nuevos tipos de interacción y las preferencias del usuario.

Dicho de otra manera, el UX no es nada más que la experiencia innovadora que obtiene un usuario en los distintos escenarios al momento de utilizar un producto, de manera que, dicha acción les brinda una respuesta/solución a sus preguntas o problemas. Según Yudica (2016), esto suscita porque los diseñadores se encargan de proporcionarle al internauta una variabilidad de soluciones frente a los diversos aspectos comunicativos que puede presentar el mismo con un determinado producto o servicio (incluida la usabilidad, accesibilidad, y capacidad de encontrar/aprender/recordar); por ende, su principal función no es otra cosa que hacer que el producto sea amigable, satisfactorio, accesible y útil para el usuario.

Prototipos UX

Ayudan a capturar visualmente los objetivos comerciales y alinearlos con las expectativas o necesidades de los usuarios, para así, tener conocimiento del grado de satisfacción que exhiben los mismo con el producto creado. Hay que tener en cuenta que el coste de modificar un prototipo es inferior al coste de cambiar un producto digital subido a producción, por lo que supone una ventaja de ahorro de costes durante el desarrollo.

El diseño de UX no solo prioriza las necesidades del usuario, sino también las capacidades metodológicas y ausencias de un negocio, ya que no todos los individuos poseen las mismas competencias técnicas para brindar una solución ideal a cada problemática; ni todas las empresas poseen el suficiente recurso monetario para invertir constantemente en los formación técnica/profesional de todos sus colaboradores.

Por este motivo, el trabajo del diseño de UX se centra en encontrar un equilibrio entre las necesidades del usuario, las necesidades comerciales y las capacidades técnicas, de manera que hallar el balance perfecto crea una experiencia de usuario beneficiosa (satisface sus necesidades) y le permite al negocio alcanzar sus objetivos, siempre y cuando esta se encuentre dentro de las capacidades técnicas de la empresa.

Se debe tener en cuenta que el diseño UX, es un proceso que inicia con la comprensión de los usuarios, luego con el diseño de interfaces, y, finalmente con la prueba para ver si el mismo logra satisfacer las necesidades de los usuarios; de modo que aquello representa una parte integral del proceso de desarrollo del producto.

A su vez, para crear un diseño fácil de usar, los diseñadores de UX deben participar en el proceso de principio a fin. Por ende, es conveniente realizar investigaciones sobre cómo los usuarios buscan un producto, navegan por las páginas, buscan detalle de los productos, e interactúan con el sistema; ya que tras la investigación y el análisis exhaustivo de los datos y registros obtenidos, deberemos de ser capaces de generar diseños y experiencias que satisfagan las necesidades de los usuarios.

Para ofrecer buenos resultados en el proceso de desarrollo de un producto se debe considerar lo siguiente:

Relación Esfuerzo – Beneficio en UX

Cuando diseñamos tomando en consideración los principios de usabilidad, lo que buscamos es reducir al mínimo las barreras de interacción, y por lo tanto el esfuerzo del usuario para completar tareas interactivas, ya que, el principal objetivo es evitar la frustración del usuario. En la mayoría de los casos el producto ideal es el que se adapta al usuario; no obstante, en ocasiones es imprescindible que sea el usuario quien se adapte al producto, de manera que se pretende reducir el tiempo de dedicación y esfuerzo para aprender cómo usarlo. Debido a aquello, es posible analizar la experiencia de usuario únicamente en términos de facilidad de uso sin tener en consideración cuál es el beneficio o valor de uso, puesto que, la calidad e idoneidad de un diseño viene determinada por la relación esfuerzo-beneficio y es sólo cuando el beneficio o valor percibido supere el esfuerzo requerido, podremos hablar de experiencias de usuario satisfactorias.

UX es igual a resolver problemas

Es importante pensar en el usuario en cada parte del proceso de realización de un producto, ya que, ponernos en el lugar del usuario al momento de utilizar dicho producto para conocer la forma en la que va a interactuar con el mismo, mejora de una manera temprana los posibles problemas que se puedan generar en el usuario con el producto terminado.Y es ahí, donde parte la importancia para UX, de llevar un proceso e involucrar al usuario en cada etapa del procedimiento, y no simplemente tener la idea de pensar en el usuario.

Diseño de experiencia no solamente se basa en satisfacer al usuario sino también a cumplir con los objetivos del negocio, el diseñador de experiencia hace de puente entre el usuario y el cliente que nos contrata.

Conclusión

UX resulta ser de gran prioridad para las organizaciones, ya que se obtiene sistemas amigables-fáciles de usar, garantiza la fluidez-eficiencia en el diseño, y exhibe una gran demanda dentro del mercado laboral, ya que actualmente los clientes buscan constantemente satisfacer sus necesidades y solucionar sus problemas de forma breve y simple. Por ello, se caracteriza por ser una experiencia innovadora que obtiene un usuario en los distintos escenarios al momento de utilizar un sistema, de manera que, dicha acción les brinda una respuesta/solución a sus preguntas o problemas. Cabe recalcar que, aquello suscita porque los diseñadores se encargan de proporcionarle al internauta una variabilidad de soluciones frente a los diversos aspectos comunicativos que puede presentar el mismo con un determinado producto o servicio (incluida la usabilidad, accesibilidad, y capacidad de encontrar/aprender/recordar); por ende, su principal función no es otra cosa que hacer que el producto sea amigable, satisfactorio, accesible y útil para el usuario

Por su parte, la implementación del UX se enfoca en las acciones que realiza el usuario delante de la pantalla, de manera que al tener en cuenta su uso, nivel de afectación y grado de aceptación; no solo genera beneficios para los usuarios, sino que también para las empresas u organizaciones, puesto que, el examinar los diferentes escenarios a los que puede estar expuesto el usuario y el brindar solución cada uno de ellos, les genera buena reputación en el mercado laboral. Teniendo presente que el diseño de experiencia no solamente se basa en satisfacer al usuario sino también a cumplir con los objetivos del negocio.

Referencia

The post UX: Experiencia de Usuario una Prioridad en el Desarrollo de Sistemas Organizacionales appeared first on Software Evolutivo.

Enganchémonos con REACT HOOKS!

Ariel Altamirano — Tue, 05 Apr 2022 15:15:43 +0000

¿Qué es un Hook?

Un Hook es una función especial que permite conectarnos a características de React, para trabajar con métodos especiales, los cuales nos permitirán manejar el estado de mejor forma sin depender de clases. (Medina, 2021)

Más adelante veremos estos principales métodos especiales.

¿Qué son los React Hooks?

Son una característica opcional que salió en la versión 16.8 en febrero de 2019, sin embargo, son compatibles con versiones anteriores. (Capparelli, 2020)

Los react hooks vienen a resolver problemas de complejidad en el manejo de la lógica de estados entre componentes y también trabajan mediante funciones (Figura 1) y ya no mediante clases (Figura 2).

Figura 1. Funciones en React Hooks

Figura 2. Clases en React

Métodos principales

Como ya hemos visto anteriormente, los hooks son funciones especiales que permiten acceder a las funcionalidades de React. En esta sección del blog veremos los hooks más importantes con una pequeña descripción de lo que hacen y un ejemplo de cada uno.

Nota: Cada hook tiene que ser importado desde la librería React (Figura 3) y cada hook es creado en un nuevo archivo, el cual tiene que ser llamado desde App.js (Figura 4)

Figura 3. Importación de useState

Figura 4. Llamado de componente.

UseState

La función useState permite añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos. (Midudev, 2019)

En el ejemplo de la figura 5, se declara una constante “text” mediante useState para cambiar el texto de un botón dependiendo su estado (true = “Texto 1” y false = “Texto 2”), cuando se da click la función handleClick cambia el estado de la constante “text”.

import React, { useState } from “react“;

const FirstExercise = () => {

const [text, setText] = useState(false);

const handleClick = () => {

setText(!text);

};

return (

<div>

<h1>Software Evolutivoh1>

{text ? “Text 1“ : “Text 2“}

button>

div>

);

};

export default FirstExercise;

Figura 5. Uso de useState

UseEffect

La función useEffect permite realizar efectos secundarios desde un componente de función, es similar a componentDidMount,componentDidUpdate y componentWillUnmount en las clases React, pero unificadas en una sola función. (React, 2022)

En el ejemplo de la figura 6, se utiliza la API de Rick and Morty para obtener una lista de datos y presentarlos en pantalla. Dicha lista se obtiene en la función useEffect cuando carga el componente, en caso de querer actualizarlo en base a algún estado se tiene que agregar dicho estado entre los corchetes finales de la función useEffect, como este no es el caso se lo deja vacío.

import React, { useState, useEffect } from “react“;

const SecondExercise = () => {

const [characters, setCharacters] = useState([]);

useEffect(() => {

fetch(‘https://rickandmortyapi.com/api/character/‘)

.then(response => response.json())

.then(data => setCharacters(data.results));

}, []);

return (

<div>

{characters.map(character => (

<h2>{character.name}h2>

))}

div>

);

};

export default SecondExercise;

Figura 6. Uso de useEffect

UseContext

La función useContext permite simplificar el manejo de estados entre los distintos componentes padre e hijos.

Formas de utilizar useContext:

Correct: useContext(MyContext)
Incorrect: useContext(MyContext.Consumer)
Incorrect: useContext(MyContext.Provider). (React, 2022)

Para este ejemplo como se puede apreciar en las figuras 7 y 8 respectivamente, se crea un contexto, en este caso crearemos un nuevo archivo dentro de src/context llamado ThemeContext, posteriormente, desde index.js importamos el archivo creado para encapsular la aplicación sobre el provider en este caso con un value igual a blue

import React from ‘react‘;

const ThemeContext = React.createContext(null);

export default ThemeContext;

Figura 7. Creación del contexto

import React from ‘react‘;

import ReactDOM from ‘react-dom‘;

import ‘./index.css‘;

import App from ‘./App‘;

import ThemeContext from ‘./context/ThemeContext‘;

ReactDOM.render(

<React.StrictMode>

<ThemeContext.Provider value=”blue“>

<App />

ThemeContext.Provider>

React.StrictMode>,

document.getElementById(‘root‘)

);

Figura 8. Importación del contexto creado

Finalmente en la figura 9, se implementará el useContext dentro del ejercicio que realizamos para useState de tal manera que obtenga el valor que establecimos y se pinte el título en este caso de color azul.

import React, { useState, useContext } from “react“;

import ThemeContext from “../context/ThemeContext“;

const ThirdExercise = () => {

const [text, setText] = useState(false);

const color = useContext(ThemeContext)

const handleClick = () => {

setText(!text);

}

return (

<div>

<h1 style={{ color }}>Software Evolutivoh1>

{text ? “Text 1“: “Text 2“}

button>

div>

);

};

export default ThirdExercise;

Figura 9. Uso de useContext

UseReducer

La función useReducer permite actualizar un estado interno por medio de una función llamada reducer. Puede ser una alternativa a useState. (React, 2022)

En el ejemplo de la figura 10, realizaremos el incremento o decremento de clicks mediante la llamada a la función reducer, la cual es llamada mediante el hook useReducer que recibe dos parámetros, el primero es la función reducer y el segundo un estado (initialState). Este estado inicial se actualiza en la función reducer dependiendo el tipo que es enviado como parámetro en la función onClick de cada botón que llama mediante al reducer y almacenado en la constante “state” mediante la cual se puede reflejar el cambio en pantalla.

Nota: No es una alternativa a Redux.

import React, { useReducer } from “react“;

const initialState = {

count: 0

};

const reducer = (state, action) => {

switch (action.type) {

case ‘increment‘:

return {count: state.count + 1};

case ‘decrement‘:

return {count: state.count – 1};

default:

throw new Error();

}

const FourthExercise = () => {

const [state, dispatch] = useReducer(reducer, initialState);

return (

Count: {state.count}

<button onClick={() => dispatch({type: ‘decrement‘})}>–button>

<button onClick={() => dispatch({type: ‘increment‘})}>+button>

);

};

export default FourthExercise;

Figura 10. Uso de useReducer

Referencias

Capparelli, A. (2020). Qué son los hooks y cómo utilizarlos en tu proyecto con React. Paradigma. https://www.paradigmadigital.com/dev/hooks-como-utilizarlos-react/

Medina, K. (2021, 05 10). Introducción a React Hooks. https://medium.com/nowports-tech/introducci%C3%B3n-a-react-hooks-55918188c5e2

Midudev. (2019, February 7). React hooks, cómo utilizar el hook useState. midudev ‍. https://midu.dev/react-hooks-use-state-anadiendo-estado-a-nuestro-componente-funcional/

React. (2022). Hooks API Reference – React. React. https://reactjs.org/docs/hooks-reference.html

React. (2022). Using the Effect Hook – React. React. https://reactjs.org/docs/hooks-effect.html

The post Enganchémonos con REACT HOOKS! appeared first on Software Evolutivo.