1.2: Diseño de Sistemas de Información
- Page ID
- 154292
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Objetivos de aprendizaje
- Compara y contrasta usabilidad, diseño gráfico y diseño analítico.
- Esbozar los pasos por los cuales se debe diseñar un sistema de información.
Muchos significados del diseño
La clave para el éxito de los sistemas de información es el buen diseño. Pero, ¿qué hace un buen diseño? Varias disciplinas intervienen sobre este tema. Veremos el diseño desde una serie de perspectivas diferentes. Siempre que sea posible contrastaremos diseños buenos y malos.
Diferentes personas usan la palabra diseño en diferentes contextos. Cuando los profesionales de IS hablan de diseño, se refieren a los procesos de negocio. Los problemas deben analizarse y documentarse los requisitos antes de diseñar, desarrollar e implementar las soluciones. Después de todo, si el diseño no satisface la necesidad del negocio, ¿entonces cuál es el punto? Sin embargo, satisfacer las necesidades del negocio es realmente un estándar de referencia. El vilipendiado sistema hospitalario descrito anteriormente satisface la necesidad comercial de registrar pacientes. Y sin embargo su diseño es de otras maneras faltante. De igual manera, la comida rápida satisface la necesidad de alimentar el hambre. Sin embargo, queremos ser metafóricamente mejores que la comida rápida en nuestros diseños.
La usabilidad describe lo fácil que es navegar el sistema. Cuanto más fácil sea el sistema de navegar, menos tiempo necesitará un usuario para dedicar a aprender a usar el sistema. Un sistema más utilizable también deja menos margen de error. La teoría de usabilidad proporciona reglas generales (heurísticas) que documentan las convenciones de mejores prácticas para diseñar una interfaz de usuario. Amazon.com tiene uno de los sistemas en línea más utilizables porque siguen las convenciones establecidas. Seguir convenciones aumenta enormemente la aceptación potencial de su sitio web o aplicación.
El diseño gráfico se refiere al atractivo visual y organización de la interfaz de usuario. Obviamente hay algo de superposición aquí con la usabilidad. Los sistemas utilizables normalmente se adhieren a al menos algunas reglas de diseño gráfico. Sin embargo, un sistema utilizable podría ser soso y poco interesante. Emplear principios de diseño gráfico ayuda a garantizar que el sistema tenga un atractivo visual. Los diseños también deben encajar con la marca general del cliente. Los colores, fuentes y logotipos existentes son parte de la marca para la que se está creando el sistema.
El diseño analítico describe cómo representar mejor la información, especialmente la información cuantitativa, para comunicarse de manera clara y veraz. Cada proyecto de sistemas de información tiene dimensiones cuantitativas asociadas a la gestión de proyectos. Estos incluyen la estimación de costos, horarios, etc.
La convergencia de usabilidad, diseño gráfico y diseño analítico en Yahoo Finance. Esta gráfica muestra el precio de las acciones de tres meses para Amazon vs Google. Desde el punto de vista de usabilidad no podría ser más fácil solicitar la gráfica. Escriba el nombre de la compañía y sugiere el símbolo de cotización bursátil. Además, a medida que mueves el cursor (la mano), el punto negro en la línea también se mueve, y los números en la parte superior izquierda se actualizan para mostrar valores para la fecha que estás pasando, ¡muy resbaladiza! El diseño gráfico es excelente, silenciando la cuadrícula subyacente para que los datos destaquen por contraste. El diseño analítico también es de primera clase. Cientos de puntos de datos se representan sin esfuerzo. Vemos el volumen de trading en cada día. En la parte inferior, el precio de las acciones se coloca en contexto durante un periodo de varios años. En suma, tenemos una tremenda cantidad de información bellamente representada sin desorden. Piensa en esto la próxima vez que veas un gráfico de PowerPoint empobrecido con cuatro barras que representan cuatro puntos de datos.
Ciclo de Vida de Desarrollo de Sistemas (SDLC)
Los sistemas de información se diseñan utilizando el ciclo de vida de desarrollo de sistemas (SDLC). El SDLC es en gran medida sentido común explicado por etapas. Primero, analizar la situación actual. A continuación, especifique los requisitos que una solución debe encarnar. La siguiente etapa es diseñar una solución (aún no hay programación). Entonces el sistema se desarrolla (programa) y se prueba. Finalmente, el sistema se pone en marcha para los usuarios finales ya que se implementa en el entorno empresarial. Para revisar, las cinco fases son:
- Análisis
- Requisitos (visión del estado futuro)
- Diseño
- Desarrollo
- Implementación
En este curso cubriremos las cinco etapas. Sin embargo, nos centraremos más en las tres primeras etapas por dos razones. Primero, porque ahí es donde los profesionales del IS tienden a pasar la mayor parte de su tiempo y segundo porque es mucho más fácil hacer cambios a un sistema cuando se encuentran en las etapas de planeación, que después de que ya se haya generado el código.
Es bueno interactuar frecuentemente con el usuario final y mostrarle maquetas de pantalla y un diagrama de arquitectura de sistemas de cómo será el sistema final. La arquitectura de sistemas es un diagrama jerárquico del flujo del sitio web o aplicación, cuál será la relación entre las páginas del sistema. A veces se le llama mapa del sitio. Idealmente, la arquitectura de sistemas se realiza en papel con notas adhesivas que pueden ser movidas a voluntad por múltiples usuarios. Una arquitectura de sistemas final se puede representar como un gráfico jerárquico en PowerPoint.
Una vez que se completa la arquitectura de sistemas, se pueden construir wireframes o maquetas de las páginas individuales. Las maquetas son páginas que no funcionan generadas en un programa de dibujo como PhotoShop, Omnigraffle (Mac) o incluso PowerPoint. PowerPoint resulta ser una herramienta de maqueta bastante respetable, especialmente cuando se trabaja con algunas plantillas predefinidas.
El SDLC en acción. Por analogía piensa en programas de mejoras para el hogar en la TV. como Curb Appeal. Por lo general, siguen un ciclo de vida similar a la hora de mejorar un hogar. Se analiza el estado actual del hogar en consulta con el residente. Durante esta etapa los residentes revelan sus requisitos para una solución. Por ejemplo, podrían querer una forma de interactuar más con los vecinos. A continuación el diseñador produce un plan para cumplir con esos requisitos. Por ejemplo, una puerta francesa en el salón que conduce a una cubierta frontal desde la que interactuar con los vecinos. En realidad, soplar un agujero a través de la pared e instalar una plataforma es la etapa de desarrollo. Si el diseño es bueno y la mano de obra buena, el propietario normalmente está encantado con la solución. Al menos parecen estar en la televisión. La siguiente ilustración ayuda a sacar algunas de las equivalencias.
Principales conclusiones
- El ciclo de vida de desarrollo de sistemas (SDLC) es un enfoque para diseñar y desarrollar soluciones MIS. Se desarrolla en etapas: análisis, requerimientos (visión del estado futuro), diseño, desarrollo e implementación.
- Los profesionales de sistemas de información suelen hacer el equivalente de un boceto del diseño del sistema final. Cuando los bocetos son crudos se les llama wireframes; cuando son más refinados se llaman maquetas. Sin embargo, a veces los términos se usan indistintamente.
Preguntas y ejercicios
- Vea un programa de mejoras para el hogar como Curb Appeal e identifique las cinco etapas del SDLC en el programa. ¿Acerca de cuánto tiempo dedica el espectáculo a cada etapa?
- Lee y resume un artículo sobre diseño de interfaces de humanfactors.com.