Recent Changes

Thursday, February 20

  1. page HTML&CSS - Lauren Ficco edited HTML & CSS (Homework #4) Lauren Ficco Original CMNS | Recreated CMNS | Reinvented CMNS I …

    HTML & CSS (Homework #4)
    Lauren Ficco
    Original CMNS | Recreated CMNS | Reinvented CMNS
    I think the original design has some inherent flaws such as the navigation menu. I think that there should be less initial options with more categorization and more prominence. Even through a few changes in the CSS, I was able to make the list more noticeable. Without worrying about the JavaScript for the expanding menu, the dividing bar did not seem sufficient. This was also a problem with the "Hot Topics" section. As we learned, visually alternating colors may not be sufficient for the pre-processing that your eyes do. I decided, thus, to add a drop shadow to each of the separate links. This was mastered easily enough as when I edited the HTML, I placed things into an unordered list. So, the only CSS change was in the list item's style. I applied this similar concept of the importance of gradients on the far right panel as well. In my opinion, the "Resources" section tend to fade into the background of the website. Adding a gradient made the content immediately stand out.
    The other important fundamental change I made to the website also had to deal with sections standing out, but not one particular item over another. I thought it was important to group the various sections and links of a site together. With the preprocessing that your brain does, arranging similar items in a similar format next to each other helps one to realize the various sections they may need. I tried to encourage this process by further grouping the sections by color. For example, the "Hot Topic" section was previously alternating Yellow/Cream and White links. I thought this divided a user's attention and was unneeded with the drop shadow. Thus, I was able to group them all by color. I also thought the "Archive" and "Press Release" links at the bottom of this section faded into the other "Hot Topics". If one was not specifically looking for these links and did not care about the "Hot Topics", they may have been practically invisible. Thus, I added a drop shadow to the text to make each link stand out, but kept the color consistent so a User would know that these links are related. This also, of course, applied to the same color links under "Resources", but an added indentation. The links on the left are the most visually different and this is to ease navigation for a user. If a user is familiar with the website and they wish to navigate elsewhere, there eyes merely need to seek the largest chunk of red.

    (view changes)
    3:03 am
  2. page Ficco, Lauren edited {Untitled.jpg} Facebook: https://www.facebook.com/LaurenFicco Email: lauren.ficco at gmail …

    {Untitled.jpg}
    Facebook:
    https://www.facebook.com/LaurenFicco
    Email:
    lauren.ficco at gmail
    Interface I Like:
    Google Search Suggestions
    {http://www.funnyscreenshots.com/wp-content/uploads/2009/10/google-suggest-01.jpg}
    Google's search suggestions never fail to make me smile. I love that the interface makes it easy to select something that a lot of people are also wondering. Sometimes I'm not sure how to word what I'm searching for and google always has the perfect (or hilarious) suggestion.
    Interface I Dislike:
    Blackberrys (In General), Specifically Blackberry's Web Browser
    {http://pulse2.com/wp-content/uploads/2009/08/blackberry-bold-flash.jpg}
    I don't like Blackberrys in general, but I really hate the web browser. The font is always tiny and I never understand where / what / how to click. After using Safari on the iPhone, the Blackberry mobile sites just seem terrible.

    (view changes)
    3:03 am
  3. page CSPAC Accessibility edited CSPAC Accessibility by Lauren Ficco Update: I am pleased to announce that the CSPAC website ha…

    CSPAC Accessibility
    by Lauren Ficco
    Update: I am pleased to announce that the CSPAC website has already begun the process to re-evaluate the accessibility of its pages!
    It is no surprise that the CSPAC website may be more visually rich than other university department websites. However, the website has low accessibility alternatives for those who have disabilities. The front page is not very “Perceivable”. There are no text-only alternatives. The images also do not have alt tags, so it impossible to know what they are advertising. The images also cycle through five different topics continuously. There is the ability to click one of the smaller images on the right to return to that image if it’s cycled past, but there is still not much of a delay. Also, the text that is on the images is not typed out so a person would have to zoom into an image instead of increasing the small font size. There are also boxes in which text color and background color are similar and links that do not even appear to be a link. Overall, the site placed too much of an emphasis on visual effect and not enough on accessibility. Any alternatives seem to be by accident and thus I would give the “Perceivable” a rating of “Not Implemented”.
    As mentioned previously, there is an image slideshow. The timing between the pictures is pretty quick and there appears to be no way to pause. There also seems to be no keyboard access on the drop down menus or any of the other links or text on the site. In general, the site seems some what confusing to navigate with links poorly categorized at the top and other columns seem to be only placed with respect to visualization. I would also rate the site as “Not Applied” for “Operable”.
    The site improves slightly when it comes to a rating of how “Understandable” it may be, as it does not operate to out-of-the-ordinary. However, the site does not appear to be very robust and does not seem to support alternative browsers for the disabled. WebAim’s WAVE report found 17 accessibility errors. So, for this category, I would say that it is “Partially Implemented” and for the “Robust” category, “Not Implemented”. Thus, CSPAC should really improve the accessibility to their website.
    Conclusion for CSPAC Accessibility:
    Perceivable: Not Implemented
    Operable: Not Implemented
    Understandable: Partially Implemented
    Robust: Not Implemented

    (view changes)
    3:02 am
  4. page Amtrak Critique edited Amtrak Critique Lauren Ficco Amtrak's Website Amtrak is a train company and overall the site …

    Amtrak Critique
    Lauren Ficco
    Amtrak's Website
    Amtrak is a train company and overall the site makes a good visual impression upon first glance with the low-level items. The layout is clean and does not have obnoxious blinking banners or distracting ads contradictory to the user's goal. The font is also readable, but stylish. I thought the color scheme was very beautiful and called your attention to the different areas of the website nicely. For example, the only large white blocks on the page are the input boxes for stations to travel to. Deals and time schedules, which are popular this for train users are also highlighted and featured in different parts of the page. The multiple placement of the same features does not appear redundant because a user's eyes tend to be dragged to one component of the page versus another. The color combination is also a consistent theme throughout the website.
    Amtrak also uses consistency in its midlevel functioning. For example, the panels on the left launch the exact same window when looking for stations. The pattern also stays continuous with the trip panel on the left appearing on every page. This is a little bizarre to look at, however, when you are "Finding a Station" as it does appear to be unnecessary. It is also frustrating that typing in a city does not automatically search for it in the left panel if that city is not already an Amtrak stop. I think that this is an error that could easily be fixed by Shneiderman's fifth rule of offering simple error handling. However, it is nice that the site at least makes you aware that "No station was found" as part of its immediate feedback when typing into the panel.
    For high level functioning, Amtrak seems to follow many of Schneiderman's Golden Rules of design; overall, the site is to the point. There are several languages offered and even images change to reflect this new language. The site says consistently navigable through the language change as well. The navigation is the site's true strong point as, at any point, you can also search for a trip with the consistent left panel. Also, clicking on the Amtrak logo in the top left, always brings you back to the home screen. The site also appears to be very credible because Amtrak is the name of the train company, not a web-based compilation of services like many other travel sites. The site is also ran by the "National Railroad Passenger Corporation" and Web Policies are available at the bottom of every page.
    Overall, Amtrak is a very professional site clearly designed and executed by people who know standards. This insight is reflected on low, mid, and high-level functioning.

    (view changes)
    3:02 am

Sunday, July 21

  1. page Zach Boldyga's Prototype edited Home Page The general goals of this implementation were to be minimalist, and also provide a po…

    Home Page
    The general goals of this implementation were to be minimalist, and also provide a powerful platform to browse through and search for particular items of clothing, outfits, and entire sets of outfits in an efficient manner. This prototype is designed to captivate the user by immediately showering them with inspiring clothing/outfit/wardrobe options. The user should be able to do more visualization and thinking towards fashion ideas than site navigation in this scenario, hence the large listings and very minimalist and subtle design.
    {Snapshot_20111019_6.jpg}
    {https://bederson.mybalsamiq.com/projects/styleshare/Zach1.png?key=d707b635ba488d80ba773d329f3ca7be97b2dbb9}
    Hand-Drawn Implementation
    Balsamiq Implementation
    In this home page window, which makes up most of the website, there are three main tabs, Clothes, Outfits, and Closets, that split the site into three identical sections for searching. Within each section there are a number of query parameters located on the left hand side, and a toggle that lets the user switch between items he/she already has their closet and ALL items in the database. If 'Mine' is selected (only viewing the user's closet), adding new items can also be achieved through an add button that takes the form of an entry but contains only a plus sign (top left box).
    Top Outfits
    {Snapshot_20111019_7.jpg}
    {https://bederson.mybalsamiq.com/projects/styleshare/Zach2.png?key=d707b635ba488d80ba773d329f3ca7be97b2dbb9}
    Hand-Drawn Implementation
    Balsamiq Implementation
    This section illustrates the popup window that appears when an outfit is selected (assuming the uppermost outfit tab is selected, outfits are displayed in the grid) - it displays images stacked in the form of a body that will hold corresponding clothing items.
    Note: All of the actions associated with the grid are single depth pop-ups, making navigation simple.
    Top Users
    {Snapshot_20111019_8.jpg}
    {https://bederson.mybalsamiq.com/projects/styleshare/Zach3.png?key=d707b635ba488d80ba773d329f3ca7be97b2dbb9}
    Hand-Drawn Implementation
    Balsamiq Implementation
    This page is the popup that appears when a clothing item is selected from the Clothing tab grid. The window provides the user with information about the item and should allow them to add it to an outfit or closet.

    (view changes)
    9:37 am
  2. page Boldyga, Zach edited Hello, my name is Zach Boldyga!Here I am dressed up as Spicoli for Halloween two years ago: {16…

    Hello, my name is Zach Boldyga!Here I am dressed up as Spicoli for Halloween two years ago:
    {16238_1272244207834_1281751491_839952_6946211_n.jpg} If you want to get in touch with me about anything, feel free to drop a line at either:zboldyga at umd emailor
    http://www.facebook.com/profile.php?id=100000446723930
    I enjoy using Facebook... this is the version I currently use:
    {pic1.jpg}
    The interface has many complex features, but can be used in a very simple manner most of the time.
    To use Facebook I primarily use the scroll bar on the right, the three buttons directly to the right of the
    Facebook logo at the top right, and the status text bar at the top of the news feed. I like this interface
    because all of the extra features are not in the way. I've only accidentally clicked the chat bar on the right
    once, and I don't ever need to look at the apps on the left... Everything I want is right in the center.
    I despise the PayPal account interface.
    I {pic2.jpg}
    PayPal is a fairly complex system, and in my opinion could be simplified for users. I have worked with both standard accounts,
    and merchant services accounts - both of which lack in simplicity. It is often hard to tell if a payment was actually made or received
    due to the strange terminology used. Also, changing important information in the account can be a hassle (especially for merchant accounts).

    (view changes)
    9:36 am

Friday, January 13

  1. page Abu-Ghaida, Ghassan edited Ghassan Abu-Ghaida {Photo_on_9-11-11_at_5.42_PM_#3.jpg} Twitter Facebook ghassan[dot]abughaid…
    Ghassan Abu-Ghaida
    {Photo_on_9-11-11_at_5.42_PM_#3.jpg}
    Twitter
    Facebook
    ghassan[dot]abughaida[at]gmail[dot]com
    Interface I Enjoy:
    Reeder
    {Screen_Shot_2011-09-11_at_6.06.11_PM.png}
    Reeder is an RSS reader that syncs to your Google Reader account. I like the simplicity of the interface and how easy it is to navigate through your subscriptions and articles through the various keyboard shortcuts. The simplicity of the interface allows the reader to focus on the article they're reading. And the colors are a nice touch.
    Interface I Don't Enjoy:
    Google Reader
    {Screen_Shot_2011-09-11_at_6.15.19_PM.png}
    Google Reader's web interface does almost everything Reeder can do, but it looks busy. The keyboard shortcuts are pretty difficult to use. And honestly, there's more blue used than I like to look at.

    (view changes)
    3:33 pm

Sunday, December 25

  1. page CMNS Redesign, Ghassan Abu-Ghaida edited CMNS Redesign CMNS Copy CMNS Redesign I like the CMNS page's overall layout. The three column s…
    CMNS Redesign
    CMNS Copy
    CMNS Redesign
    I like the CMNS page's overall layout. The three column system makes sense and the search bar at the top is useful, but there are a few things that can be tweaked. In my redesign, one of the most important changes I made was to space out the links on the left, make the font larger, and make the font bold. I feel these links are the most important ones on the page, and should be highlighted as such. I also made the Hot Topics links on the middle of the screen smaller. Because I believe that most people navigating to the page are interested on the links to the left, I don't want them to be distracted by the news in the "Hot Topics" sections.
    I got rid of the unused space on the top of the screen, which pushed the rest of the page down without much reason. I also made the search bar larger and more visible since it didn't really standout in the original CMNS website design. I made the text at the bottom of the screen a bit larger, since it wasn't readable at it's original size. I also changed the font color of the date, which appears under the search bar, white because it didn't contrast much with the black background when it was gray.

    (view changes)
    8:15 pm
  2. page Southwest Airlines edited Ghassan Abu-Ghaida http://www.southwest.com/ Low-level items (spelling, fonts, colors, layouts, …
    Ghassan Abu-Ghaida
    http://www.southwest.com/
    Low-level items (spelling, fonts, colors, layouts, etc.)
    The first thing I noticed looking at the Southwest Airlines main page is that there is a lot of blue on the page. This may be due to the large number of links on the page. Blue is the typical color of links, but something should be done to increase the contrast of important links. When everything looks like a link, nothing looks like a link. It's just appears to be blue text. The page offers good feedback, changing colors of the tabs on the top of the page when hovered over. This assures the user that these buttons are clickable without being blue. The layout of the page is pretty accessible, but the login box on the right side of the page doesn't feel right. It's sort of tucked away and crammed into a small space, making it hard to find. Compared to the larger box on the left, which makes it easy to book your trip, logging in for a new user may be a problem.
    Middle-level aspects (consistency, error handling, writing style, menu design, etc.)
    Once the user starts typing in the "From" textbox in the section which lets you book flights, Southwest Airlines offers suggestions of airports based on the user's inputs. This makes it very easy for the user to select the correct airport, reducing the short-term memory load and cutting down possible errors the user can make. Instead of having the user question guess what the correct format to input the departure and arrival dates, Southwest allows the user to select the date on a calendar. This also cuts down possible errors the user can make. The writing style of the page is mostly simple as most of the text on the page are links that can be described in a few words. These links aren't very descriptive, but they do make sense while navigating the page. The page hides more links under the major tabs at the top of the screen, but they all make sense as falling under the categories represented by the tabs and leaves the page looking less cluttered than it would have if the links did not expand out from the tabs.
    High-level concepts (information architecture, navigation, audience appeal, privacy protection, credibility, etc.)
    The page makes it incredibly easy to schedule a trip from the main page. One of the first things that pop out at the user when the page is loaded is the box on the left that offers options for scheduling a flight, booking a hotel, and renting a car. Instead of having the user go to different pages to take care of their needs, Southwest allows the user to do it all from their main page. Having these three on a different page would make these features less visible, and the user may not know that Southwest offers these services. The page doesn't feel very secure, as it doesn't seem to support HTTPS. With the tabs at the top of the page categorizing the user's needs, navigating the site is a breeze. One of the larger problems I have with a site is that the login box is sort of hidden on the right side of the screen. If I had designed the site, I would have put a simple "Login" link on the top right side of the page, making it easy to see. Overall though, the page works the way the user would expect it to and most of the problems I see with the page can be easily remedied.

    (view changes)
    8:14 pm

More