USA: +1(669)289-8683 
Sign in
Discussion Post
One of the most important skills of a system analyst is designing effective user interfaces. There are several “rules” that one must follow, pertaining to user interface design.
The user interface should:
1. Be easy to learn and use
2. Enhance user productivity
3. Provide users with help and feedback
4. Have an attractive layout and design
5. Focus on screens dealing with data entry
6. Reduce or minimize input volume
7. Use validation rules
8. Provide useful and understandable information/feedback to the user
The Assignment
1. Assess each of these rule-areas and, based on an experience YOU have had with an Information System, or Website, select one of the rules that YOU feel could be implemented to enhance the “user experience” of that Website or information system.
2. Write a brief synopsis of the system or website you experience(d), and explain why you believe this rule would improve it. Defend your reasoning from a professional user, or systems analyst perspective.
3. Respond to fellow students who reply to your post.
IFSM 468 Week 5 Reading and Information
PHASE 3: SYSTEMS DESIGN
Systems Design Overview
The Relationship between Analysis & Design
During the systems analysis phase, the systems analyst developed data-flow diagrams to understand the system. He or she also developed a data dictionary for data flow, data store, and processes of the system. These are included in the systems proposal.
On the basis of the data-flow and data dictionary, in the design phase, a systems analyst designs the output reports/screens, input screens, file or database structure, programming structure, and system architecture.
System Design Activities
An information system has five basic components: hardware, software, data (files, database), people, and procedure. These components are independent and the understanding the interaction of these components is very important to develop a sound design of a system.
The following are the basic steps of the systems design phase:
1. Input and Output Design
1. File or Database Design
1. Program Design
1. System Architecture
1. Design Specification
Input and Output Design
Note, in the data dictionary, each data flow is defined by a data structure of data elements. The input data flow from the external entities and the output data flow to the external entities are also defined in the data dictionary. These two data dictionaries are used to design data-entry inputs and reports or screens of the system.
File or Database Design (Logical and Physical Design)
File or database design originates from the data store portion of the data dictionary. A choice between the file and database must be made. The physical data-flow diagram is a good place to look for this choice (data that is temporary or data that needs to be transmitted).
When designing a database, first create a logical design of the database, say, using the entity-relationship model. The same is true for the file. The logical design describes the relationships of data.
Once the logical design is made, the physical design of the file or database is performed. It includes defining the type of database, type of file (transaction, log, master, etc.), type of media, and so on.
Program Design (Structure Chart)
Although all the processes of a system are described in a data dictionary, but the sequence of processing are not defined. It is embedded in the data-flow diagrams.
In this step, the systems analyst starts with the data-flow diagrams and creates a structure chart, which is a graphical representation of program modules and their relationship to each other within a hierarchical structure of the whole system.
System Architecture
It defines the design of the processing methods, including batch, online, centralized, distributed, and client/server, including necessary network configuration.
Design Specification
The output of this phase is a Design Specification (or Functional Specification) which organizes all design documents. It also includes any justification necessary for the design, and the estimated development and implementation cost of the design.
Where to Start the Design?
The best place to start the design process is with the system output. This is because the output requirements describe what the system must do to meet business needs. The design of input, data files or database, program structure, and system architecture will follow; but activities can run in parallel.
Principles of Good Design
There are six basic principles of good input/output design, which can be summarized as U2H2C2:
1. User Involvement
1. User first, computers last
1. Minimize human efforts
1. Remember human limitations
1. Convention standardization
1. Cultural bias.
These are described briefly in the following.
User Involvement
1. The users interact with a system through the interfaces (input/output).
1. To increase the satisfaction of the user, the analyst should consult the user throughout the design of the user interfaces.
1. The primary goal of input/output design is to assist the user in their tasks.
1. If the design is good, the users perform their task easily and make few mistakes. If the design is bad, the users grumble and make mistakes.
1. Good design enhances user productivity.
User First, Computers Last
1. The design choices must be made to create the best design for the users rather than the easiest design for the programmers to code.
1. The interfaces must be formulated to assist the user, but if the system performance will be severely degraded, compromises may be necessary.
Minimize Human Efforts
1. Whenever possible, the interaction of the human with the computer should be minimized.
1. The number of keystokes by the user should be minimal.
1. Avoid manual data entry to minimize data error.
1. Do not key in data that can be retrieved from the file or database.
1. Do not ask for a value that can be computed by the system.
1. For example, using the zip code to identify a client’s city and state is more appropriate than having the user enter the city and state values.
Remember Human Limitations
1. Humans are prone to errors, and hence checks should be placed in the system to prevent the entry of erroneous data.
1. Screens should not be cluttered with too much information that can overwhelm the user.
1. Information carried over to more than three screens should be avoided. This is to reduce human empowerment of short-term memory and pattern recognition.
1. The system menu and the screens should be linked such that screens can be called up without going through multiple sacreens.
Convention Standardization
1. If other systems of an organization have some standard that the users are used to, implement the same to the new system.
1. Standardization assists the user by eliminating the need to remember many operating procedures.
1. For example, if function F1 is used to display help features of other information systems, adopt the same for the new system.
Cultural Bias
1. Design of input and output should be consistent with the natural human expectation.
1. Screens, forms, and reports should follow data representation from left to right and then from top to bottom.
1. Computer messages such as error messages should be use common terms used in the work area rather than expressions preferred by a particular user or programmer.
Read Chapter 7 to learn about how data is structured and organized in the detailed design process.
Review this article to learn the basic concepts of designing effective graphical user interfaces.
Effective Visual Communication for Graphical User Interfaces
by Suzanne Martin
The use of typography, symbols, color, and other static and dynamic graphics are used to convey facts, concepts and emotions. This makes up an information-oriented, systematic graphic design which helps people understand complex information. Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.
Design Considerations
There are three factors that should be considered for the design of a successful user interface; development factors, visability factors and acceptance factors.
Development factors help by improving visual communication. These include: platform constraints, tool kits and component libraries, support for rapid prototyping, and customizability.
Visability factors take into account human factors and express a strong visual identity. These include: human abilities, product identity, clear conceptual model, and multiple representations.
Included as acceptance factors are an installed base, corporate politics, international markets, and documentation and training.
Visible Language
Visible language refers to all of the graphical techniques used to communicate the message or context. These include:
· Layout: formats, proportions, and grids; 2-D and 3-D organization
· Typography: selection of typefaces and typesetting, including variable width and fixed width
· Color and Texture: color, texture and light that convey complex information and pictoral reality
· Imagery: signs, icons and symbols, from the photographically real to the abstract
· Animation: a dynamic or kinetic display; very important for video-related imagery
· Sequencing: the overall approach to visual storytelling
· Sound: abstract, vocal, concrete, or musical cues
· Visual identity: the additional, unique rules that lend overall consistency to a user interface. The overall decisions as to how the corporation or the product line expresses itself in visible language.
Principles of User Interface Design
There are three fundamental principles involved in the use of the visible language.
· Organize: provide the user with a clear and consistent conceptual structure
· Economize: do the most with the least amount of cues
· Communicate: match the presentation to the capabilities of the user.
Organize
Consistency, screen layout, relationships and navigability are important concepts of organization.
Example: Chaotic Screen Example: Ordered Screen
Consistency
There are four views of consistency: internal consistency, external consistency, real-world consistency, and when not to be consistent.
The first point, internal consistency states the same conventions and rules should be applied to all elements of the GUI.
Example: Internal Consistency – Dialogue Boxes
Same kinds of elements are shown in the same places.
Those with different kinds of behavior have their
own special appearance.
External consistency, the second point, says the existing platforms and cultural conventions should be followed across user interfaces.
Example: External Consistency for Text Tool Icons
These icons come from different desktop publishing
applications but generally have the same meaning.
Real-world consistency means conventions should be made consistent with real-world experiences, observations and perceptions of the user.
Example: Real-World Consistency
The last point, innovation, deals with when not to be consistent. Deviating from existing conventions should only be done if it provides a clear benefit to the user.
Screen Layout
Three ways to design display spatial layout: use a grid structure, standardize the screen layout, and group related elements.
A grid structure can help locate menues, dialogue boxes or control panels. Generally 7 +/-2 is the maximum number of major horizontal or vertical divisions. This will help make the screen less cluttered and easier to understand.
Relationships
Linking related items and disassociating unrelated items can help achieve visual organization.
Example: Relationships
Left: Shape, location, and value can all create strong visual
relationships which may be inappropriate.
Right: Clear, consistent, appropriate, and strong relationships.
Navigability
There are three important navigation techniques: – provide an initial focus for the viewer’s attention – direct attention to important, secondary, or peripheral items – assist in navigation throughout the material.
Example: Navigation
LEFT: Poor design.
RIGHT: Improved design; spatial layout and color help focus viewer’s
attention to most important titlebar areas. Bulleted items
guide the viewer through the secondary contents.
Economize
Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis.
Simplicity
Simplicity includes only the elements that are most important for communication. It should also be as unobstrusive as possible.
Example: Complicated and Simpler Designs
Clarity
All components should be designed so their meaning is not ambiguous.
Example: Ambiguous and Clear Icons
Distinctiveness
The important properties of the necessary elements should be distinguishable.
Emphasis
The most important elements should be easily perceived. Non-critical elements should be de-emphasized and clutter should be minimized so as not to hide critical information.
Communicate
The GUI must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully.
Example: Illegible and Legible Texts
Readability: display must be easy to identify and interpret, should also be appealing and attractive.
Example: Unreadable and Readable Texts:
Unreadable: Design components to be
easy to interpret and understand. Design
components to be inviting
and attractive.
Readable
Design components to be easy to
interpret and understand.
Design components to be inviting
and attractive.
Typography: includes characteristics of individual elements (typefaces and typestyles) and their groupings (typesetting techniques). A small number of typefaces which must be legible, clear, and distinctive (i.e., distinguish between different classes of information) should be used. Recommendations: – maximum of 3 typefaces in a maximum of 3 point sizes – a maximum of 40-60 characters per line of text – set text flush left and numbers flush right. Avoid centered text in lists and short justified lines of text – use upper and lower case characters whenever possible.
Example: Recommended typefaces and typestyles
Multiple Views: provide multiple perspectives on the display of complex structures and processes. Make use of these multiple views: – multiple forms of representation – multiple levels of abstraction – simultaneous alternative views – links and cross references – metadata, metatext, metagraphics.
Example: Verbal and Visual Multiple Views
Color
Color is one of the most complex elements in achieving successful visual communication. Used correctly, it can be a powerful tool for communication. Colors should be combined so they make visual sense.
Some advantages for using color to help communication: – emphasize important information – identify subsystems of structures – portray natural objects in a realistic manner – portray time and progress – reduce errors of interpretation – add coding dimensions – increase comprehensibility – increase believability and appeal
When color is used correctly, people will often learn more. Memory for color information seems to be much better than information presented in black-and-white.
There are some disadvantages for using color: – requires more expensive and complicated display equipment – many not accommodate color-deficient vision – some colors can potentially cause visual discomfort and afterimages. – may contribute to visual or may lead to negative associations through cross-disciplinary and cross-cultural association.
Color Design Principles
The three basic principles can also be applied to color: color organization, color economy, and color communication.
Color organization pertains to consistency of organization. Color should be used to group related items. A consistent color code should be applied to screen displays, documentation, and training materials.
Similar colors should infer a similarity among objects. One needs to be complete and consistent when grouping objects by the same color. Once a color coding scheme has been established, the same colors should be used throughout the GUI and all related publications.
The second principle of color, color economy, suggests using a maximum of 5+/-2 colors where the meaning must be remembered. The fundamental idea is to use color to augment black-and-white information, i.e. design the display to first work well in black-and-white.
Color emphasis suggests using strong contrasts in value and chroma to draw the user’s attention to the most important information. Confusion can result if too many figures or background fields compete for the viewer’s attention. The hierarchy of highlighted, neutral, and low-lighted states for all areas of the visual display must be designed carefully to provide the maximum simplicity and clarity.
Color communication deals with legibility, including using appropriate colors for the central and peripheral areas of the visual field. Color combinations influenced least by the relative area of each color should be used.
Red or green should not be used in the periphery of the visual field, but in the center. If used in the periphery, you need a way to capture the attention of the viewer, size change or blinking for example. Blue, black, white, and yellow should be used near the periphery of the visual field, where the retina remains sensitive to these colors.
If colors change in size in the imagery, the following should be considered: as color areas decrease in size, their value (lightness) and chroma will appear to change.
Use colors that differ in both chroma and value. Avoid red/green, blue/yellow, green/blue, and red/blue combinations unless a special visual effect is needed. They can create vibrations, illusions of shadows, and afterimages.
For dark viewing situations, light text, then lines, and small shapes on medium to dark backgrounds should be used in slide presentations, workstations and videos. For light-viewing situations, use dark (blue or black) text, thin lines and small shapes on light background. These viewing situations include overhead transparencies and paper.
Color Symbolism
The importance of color is to communicate. Therefore color codes should respect existing cultural and professional usage. Connotations vary strongly among different kinds of viewers, especially from different cultures. Color connotations should be used with great care. For example: mailboxes are blue in the United States, bright red in England and bright yellow in Greece. If using color in an electronic mail icon on the screen, color sets might be changed for different countries to reflect the differences in international markets.
Conclusion
Developing better visual (color or black-and-white) communication is an important part of making computer graphics that communicate effectively and efficiently through graphic design.
References
Marcus, A. SIGGRAPH 93 tutorial notes: Graphic Design for User Interfaces. August 1993.
Read this article from Microsoft’s SQL Server Reporting Service (SSRS) to learn how to design an effective report.
Report Design Basics (SSRS)
https://technet.microsoft.com/en-us/library/ms159267%28v=sql.105%29.aspx
To create a basic report, you must specify which data you need for a report, how you want to organize it on the page, and how you want a user to view the report.
Parts of a Basic Report
A report has a header, a body, and a footer. A report also has a default page size with page headers and page footers. You can place report items such as images, text boxes, and lines in headers and footers. The body of the report contains the report data. You can place any type of report item in the body, including tables, matrices, lists, charts, and gauges. You link report data to report items on the design surface. When the report is processed, the report data and layout items are combined. When you view the report, the combined data and layout elements are sent to a report renderer. The renderer dynamically determines how much data fits on each page. Report parameters are used to specify the data to use in a report, connect related reports together, and vary report presentation.
In a report, you can place report items anywhere on the design surface; you are not limited to “bands” of data. You can place data regions with different sets of data side-by-side. Certain report items can also contain other report items. For more information, see Data Regions and Maps (Report Builder 3.0 and SSRS).
Specifying Report Data
Reports use the following types of report data: a report dataset with a field collection (from a query that runs on a data source and returns data in rows and columns, where the column names provide the default field collection), built-in fields, images that are used in the report, and report parameters. Report data is organized on the Report Data pane. Report data is linked to report layout elements through report expressions. Expressions can be written using built-in libraries or can access the full range of Visual Basic .NET Framework classes. For more information, see Data Connections, Data Sources, and Connection Strings (SSRS), Adding Data to a Report (Report Builder 3.0 and SSRS), and Expressions (Report Builder 3.0 and SSRS).
When your dataset query includes variables, query parameters are automatically created for the dataset, and corresponding report parameters are automatically created for the report. When the user runs the report, they can type or select values that help customize the report data for their interests. For more information, see Parameters (Report Builder 3.0 and SSRS).
Organizing Report Data on a Page
Reports use a variety of report items to organize data on a report page. Report items are available in the Toolbox. You drag report items to the report design surface and then drag report data from the Report Data pane to the report items on the design surface. The design surface is not WYSIWIG. The report items have an initial layout position that may change when the report is processed. The following list describes typical uses for different report items:
· Textbox. Use for titles, date stamps, and report names. Placeholder text appears in text boxes where you have linked data and layout items. The placeholder text is display text for an underlying report expression. During report processing, report data is substituted for the report expressions and the calculated values replace the placeholder text.
· Table, Matrix. Use to display tabular or crosstab data from a report dataset. Table and Matrix are templates of a Tablix data region and provide a starting grid layout for data from a report dataset.
· Chart. Use to graphically display data from a report dataset. You can also nest a chart inside a Tablix data region.
· Map. Use to present data against a geographical background. Reports can use spatial data that defines the map from built-in maps, SQL Server databases, Environmental Systems Research Institute, Inc. (ESRI) shapefiles, or Microsoft Virtual Earth Tiles.
· Gauge. Use to present a visual image for a single value within a range of values.
· List. Use to create a free-form layout like forms on a Web page. A List is a template of a Tablix data region and provides a starting layout for data from a report dataset.
· Image. Use to add existing images to a report.
· Subreport. Use as a placeholder another report. A subreport must be designed separately and published to the report server to be included in a parent report.
· Line, Rectangle. Use lines and rectangles as graphical elements. A rectangle can also be used as a container for other report items. Use a rectangle to help control how report items like data regions appear on a report page when the report is rendered.
A typical report uses Tablix data regions. You drag fields from the Report Data pane and drop them on a Tablix cell for a data region, or to the Grouping pane to define groups for the selected data region.
Previewing or Exporting the Report
When you run a report using Preview, the report authoring client processes the report locally and displays the rendered report in HTML. Reporting Services extensions perform much of this work: a data processing extension is used to retrieve the data based on the type of data source and a rendering extension is used to provide report output based on the selected format. To see the report in other rendering formats, use the Export button on the toolbar. Different extensions can change the way data is processed and the report is rendered. For more information, see Page Layout and Rendering (Report Builder 3.0 and SSRS) and Exporting Reports (Report Builder 3.0 and SSRS).
When you publish (also known as deploy) a report to the report server, you must accept or change the default deployment properties. The report server processes and renders the report. Then you view the report using Report Manager by browsing to the report location on the report server, for example, http://localhost/reports/reportname.
Pagination
Pagination in a report is determined by the page size of the report and any page breaks placed on report items. Rendering extensions that support page size, such as Image and PDF, format the data in the report to fit within each page. Rendering extensions that do not support page size render all data between page breaks on a single page. Some extensions that do not support page size may employ soft page breaks. The HTML rendering extension does this. The position of soft page breaks are determined by the size of the page, but are not as exact as page breaks placed by rendering extensions that support page size. All rendering extensions that support page breaks on items will start a new page after each page break in the report. For more information about working with page size and page breaks, see Understanding Pagination in Reporting Services (Report Builder 3.0 and SSRS).
Improving the Report Design
You typically work back and forth between the Design and Preview tabs to design the report and then run the report to see the rendered result in the report viewer. Typical changes you might make to a report to improve its presentation or performance are:
· Add report parameters to allow a user to change the report data. Report parameters that are linked to query parameters on the dataset properties can reduce the amount of data retrieved from a data source. If you supply default parameters for each report parameter, the report runs automatically on first use. You can also provide a list of valid values for a parameter, so the user can choose from values that are known to exist on the data source. For more information, see Parameters (Report Builder 3.0 and SSRS).
· Generalize a query by adding query parameters. The syntax for queries that include variables depends on the type of data source you connect to. For more information, see the specific topic for the data source you are using in Adding Data from External Data Sources (SSRS) and Using Variables and Parameters (Database Engine).
· Organize report pages to provide answers to specific questions at a glance. For more information, see Understanding Pagination in Reporting Services (Report Builder 3.0 and SSRS).
· Add interactive sort buttons to data region columns. For more information, see Interactive Sorting (Report Builder 3.0 and SSRS).
· Add a date stamp and report name to the report. For more informtion, see Using Built-in Collections in Expressions (Report Builder 3.0 and SSRS).
· Use visibility options to hide complexity, but allow a user to drill down into areas of interest. For more information, see Hiding and Showing Report Items by Adding Drilldown (Report Builder 3.0 and SSRS).
· Provide a document map or a customized internal links table for a report for each of navigation. For more information, see How to: Create a Document Map (Report Builder 3.0 and SSRS) or How to: Add a Bookmark to a Report (Report Builder 3.0 and SSRS).
· Align chart groups with table groups to provide a way to visualize tabular data. For more information, see Linking Multiple Data Regions to the Same Dataset (Report Builder 3.0 and SSRS).
· Provide conditional color or images to highlight data values. For more information, see Using Expressions (Report Builder 3.0 and SSRS) and Expression Examples (Report Builder 3.0 and SSRS).
For more information, see Report Design Tips (Report Builder 3.0 and SSRS).
IFSM 468 Week 5 Discussion Post
One of the most important skills of a system analyst is designing effective user interfaces. There are several “rules” that one must follow, pertaining to user interface design.
The user interface should:
1. Be easy to learn and use
2. Enhance user productivity
3. Provide users with help and feedback
4. Have an attractive layout and design
5. Focus on screens dealing with data entry
6. Reduce or minimize input volume
7. Use validation rules
8. Provide useful and understandable information/feedback to the user
The Assignment
1. Assess each of these rule-areas and, based on an experience YOU have had with an Information System, or Website, select one of the rules that YOU feel could be implemented to enhance the “user experience” of that Website or information system.
2. Write a brief synopsis of the system or website you experience(d), and explain why you believe this rule would improve it. Defend your reasoning from a professional user, or systems analyst perspective.
3. Respond to fellow students who reply to your post.
THIS IS A SAMPLE OF ONE OF MY CLASSMATES POST!
