Author: dpanto

Social Media Remix

I think Instagram would be an effective platform for the Greenspring Review and my submission. Instagram is a popular social media platform among highschool and college-aged young adults. Likewise, many Stevenson University students turn to this platform to receive university updates and entertainment from Stevenson’s many accounts. I think fellow students would relate to my poem and enjoy reading it during this time. My poem’s audience is Stevenson University students and their loved ones who may be considered essential workers during this time.

Instagram is a social media platform where users can share and communicate through images that are paired with text captions with a limit of 2,200 characters and 30 hashtags. I will use text as a caption to describe the poem and urge users to read the full poem on the Greenspring Review website. I will also include the link to the poem in the caption to drive users to the Greenspring Review website. The font and color of the text can not be altered, but I will use emojis and hashtags to attract the audience. An image will be used as media to represent my poem and compliment the caption. The image will be the same one used to represent my poem on the Greenspring Review website to ensure the branding is consistent on all platforms.

I believe my audience would best view and interact with the social media post in the evening around 5 or 6 PM. I do not believe the day of the week the media is posted will affect the amount of views and interactions as much as the time will. I can gain more likes, comments, and views by having other users share the Instagram post on their stories which will prompt more users to visit the post.

Greenspring Review Social Media post

GSR Submission: Creative Poem

A Response to Responders

 

At a time when disaster struck, you faced exhaustion,

exceeding the limits of overtime.

When hostility attacked, you showed compassion,

persisting against their whine.

 

At a time when everyone fled, you trudged on,

in just your uniform and a mask.

When supplies were limited, you prevailed,

without complaining about the task.

 

At a time when the world took shelter, you were exposed,

fulfilling your civic duty.

When there was no one else to turn to, you stepped up,

showing your true beauty.

 

At a time when gratitude is needed,

since things like this come out of the blue.

When human decency is desired,

we would like to join to say thank you.

 

Multimedia Link: https://drive.google.com/file/d/1RUjMPUqFXIUecYcWSEDdo0EVfLP485Np/view?usp=sharing

Stylesheet Exercise

https://drive.google.com/file/d/1O9xkjyKz8GKslRUUpeWu3h_2Ky-E6dHa/view?usp=sharing

This exercise made me realize that more goes into editing for digital publishing than I initially thought. Prior to this assignment, I did not realize that each article that is being published digitally has its own style sheet that is used when editing the publication. I found the checklist and details of each section helpful for finding the changes that need to be made to the publication to ensure the style is consistent. I can see how having a style sheet to follow would be especially beneficial when having multiple writers/editors looking at a publication. The process of applying the style sheet to the publication was very time consuming because of the detailed instructions that needed to be followed.

HTML Code Reflection

https://docs.google.com/document/d/1zZhnF21H4wA7UbeYQNsGPdSDsjrQ5YFJY8MBunSHXBI/edit?usp=sharing

The self-guided HTML lessons on w3schools.com were helpful in refreshing my of HTML coding and CSS styling. Each lesson began with a description of the subject matter at hand, a tutorial, and example code for you to practice the code yourself. The lessons taught skills regarding style attributes. These skills included adding title attributes, creating headings and paragraph text, preserving line breaks in text, adding quotations, adding links, and defining images. I walked myself through each lesson beginning with the tutorial first. I read the description of what each piece of code does and played with the example code before trying the exercises. Once I completed an exercise, I checked if my answer was correct and wrote a reflection on what I learned from each lesson. Each lesson taught a new skill. These skills included adding title attributes, creating headings and paragraph text, preserving line breaks in text, adding quotations, adding links, defining images, and other style attributes.

This HTML coding and CSS styling was very familiar to me. It did not take me long to complete each lesson as I have practiced such coding in previous web design classes. There was not many obstacles for me to come. However, some lessons did teach me new pieces of coding that I have not seen before. This code included the <pre> element for preserving line breaks or spaces in a body of text, style attributes for creating sub-scripted text, and the <abbr> element for creating abbreviations. My prior knowledge of web design paired with these HTML lesson refreshers has me feeling very confident in my coding skills. I am positive I can apply these skills to a real website in the near future such as the Greenspring Review.

Aesthetic-Usability Article Summary: Part 2

The article “Foundational UX Workshop Activities” covers the seven fundamental workshop activities including how to do them and when they are helpful. Postup is a timed activity where participants brainstorm content on sticky notes. Gibbons explains this actiivty encourages full participation and can be used throughout the workshop to facilitate ideas and goals. Affinity diagramming is organizing sticky notes, like those generated in postup, into similar themed groups. This activity helps identify patterns and develop a mutual understanding among team members. Landscape mapping is organizing similar content groups, like those generated in affinity diagramming, into an assigned structure. This helps participants see how categories relate to eachother to develop a customer-journey map. Storyboarding is a way to show a chronological sequence of information through images. Gibbons details storyboards help teams focus on the user’s behavior and can be used in research and ideation workshops. Forced ranking is an activity to help prioritize information and create an order. This activity is helpful during ideation to decide which ideas should be prototyped. Role playing is when participants act out another person’s perspective. Gibbons explains this is helpful to force team members to challenge how they think and channel their end-user. Team members can take on the role of the system and the end-user. The final activity is playback, sharing insights gained to the group. This activity can occur throughout the workshop to encourage team members working together and staying on the same page. These seven activities are beneficial to guide team members as they work together to generate content, solve problems, and ultimately create a good user experience.

Gibbons, Sarah. “Foundational UX Workshop Activities.” Nielsen Norman Group, https://www.nngroup.com/articles/workshop-activities/. Accessed 2 Mar. 2020.

Accessibility Poster: Anxiety

Do's and Don'ts Accessibility Poster
Do’s and Don’ts Accessibility Poster: Anxiety

The overall audience for the Greenspring Review is Stevenson students (current, perspective, and alumni) and faculty/staff. For the poster, the audience is Stevenson students whether current, perspective, or alumni who suffer from anxiety, depression, or other mental illnesses. The Greenspring Review is an online magazine designed to showcase student work. I chose this audience because it is not uncommon for college students to suffer from these conditions.

I created the “Do’s” and “Don’ts” list to assist with the Greenspring Review redesign and catering to this audience. The website navigation should be simple, easy, and accessible. If navigation appears in multiple places or disappears entirely as a user scrolls through the website, this will be frustrating and confusing for the user. The website should make important information and selections clear. Not providing clear markers such as highlighting a link a user is selecting or the current page the user is on can mislead the user and unpredictably take them to a new page on the site they were not trying to access (Swallow, 2018). The website should use images and subheadings to break up text. The website should also use a simple, logical layout. Long blocks of text paired with complex and cluttered layouts can make the user feel as though they are being crowded. Using a simple and consistent color scheme instead of a complex busy one can also assist with this.

I applied my “Do’s” and “Don’ts” to the actual design of the poster. These “Do’s” and “Don’ts” consider the digital well-being of the user and their cognitive capacity (Li, 2020). I thought this was important to convey in my design. I decided against including a background image or texture because that would be a trigger for a viewer with anxiety. Instead, I chose a simple color scheme of three colors: light green, blue, and gray. I wanted the design to be simple, relaxing, and calming to look at. The colors also assisted in differentiating the difference between the “Do’s” and “Don’ts.” I chose icons to accompany the text to avoid having a text heavy list and to assist viewers in understanding the content. I used a line to divide the title from the main body and used rounded boxes to break up the content. The rounded boxes were chosen to continue the simple and calming feel of my design that boxes with sharp, harsh corners would have disrupted. This helped my design flow and increased the readability of the content. Additionally, I left enough white space around my design to give the elements padding, but made sure to not have too much white space which could overwhelm the viewer.

Works Cited
Li, Jacky. “3 Practical Tips for Product Builders When Designing in an Era of Digital Exhaustion.” Medium, 11 Jan. 2020. Retrieved from https://uxdesign.cc/3-practical-tips-for-product-builders-when-designing-in-an-era-of-digital-exhaustion-47131d933baa.
Swallow, David. “A Web of Anxiety: Accessibility for People with Anxiety and Panic Disorders [Part 2].” TPG, 7 Nov. 2018, https://developer.paciellogroup.com/blog/2018/11/a-web-of-anxiety-accessibility-for-people-with-anxiety-and-panic-disorders-part-2/.

Aesthetic-Usability Article Summary

The article “How to Maximize Insights in User Testing: Stepped User Tasks” covers how to successfully create a usability test and what can be learned from the test. Typically usability test tasks are too direct and lead users where they need to go which skews results. Pernice suggests using stepped tasks. Stepped tasks are defined as tasks in a set of related tasks that become more specific as the user moves through the test. The idea is to start broad. This allows companies to learn if users can easily maneuver the site and accomplish the tasks without being told of the features or guided towards them. From there, subtasks can be added on as “follow up questions” to help guide users in the right direction if they did not complete the task the first time. Pernice places an emphasis on observation rather than communication. While it is acceptable to give participants verbal reassurance, a conversation should not be started so the participants do not view the test as an interview. A good usability test is when the facilitator stays mostly quiet while handing the participant new tasks and recording their observations. Usability tests that involve stepped tasks are beneficial for companies to ensure their interface is working as expected or provides feedback for what the company should change to improve user experience.

Pernice, Kara. “How to Maximize Insights in User Testing: Stepped User Tasks.” Nielsen Norman Group, https://www.nngroup.com/articles/user-testing-stepped-tasks/. Accessed 26 Feb. 2020.

JITP Article Summary

The article “The Embodied Classroom: Deaf Gain in Multimodal Composition and Digital Studies” discusses the concept of body communication expressing more than just words or art. Leeann Hunter, a university professor, draws from her personal experiences of being raised with two deaf parents. Hunter reflects on how she was more in tune with using facial expressions and body language to communicate as a child, but her studies as an English major minimized this behavior focusing on speech and sound. A story of when her parents came to visit her classroom exemplified this point. Hunter asked her students to focus on nonverbal communication when giving their presentations to help engage her parents, but even this failed to keep her parents connected. From this experience, Hunter tells the lesson she learned. Nonverbal communication extends past captions and visual aids. “Nonverbal communication is the story we tell with our bodies.” (Hunter, 2015) Her parents further inform that nonverbal skits play a large role in American Sign Language (ASL) storytelling. Hunter’s experience expresses the importance of in person communication through body language rather than slide shows or other digital interfaces. Her understanding of sign language led her to make this discovery for nonverbal communication, thus creating the embodied classroom.

Hunter, Leeann. “The Embodied Classroom: Deaf Gain in Multimodal Composition and Digital Studies.” The Journal of Interactive Technology and Pedagogy, 17 Dec. 2015, https://jitp.commons.gc.cuny.edu/the-embodied-classroom-deaf-gain-in-multimodal-composition-and-digital-studies/.

GSR Redesign

Team 1
    • I like the simple navigation on the Home page that gives the user four options with no overbearing drop-down menus.
    • I like the idea of featuring the most recent article/artwork first on the landing page.
    • I like how the right column remains on every page featuring the search bar, event countdown, contact information, and subscription option.
    • I like how the issues are organized by genre under the year/semester they were published.
    • I like the simplified About Us page. I would just rearrange the layout to have the bio about GSR first, then a smaller picture of the staff with their names below it.
Needs Improvement
    • The background image is distracting, clashes with the green and white color scheme, and brands the magazine as only for literature, not encompassing everything GSR has to offer.
    • The header and content should stretch across the entirety of the screen eliminating the need for the background image. The header should stretch the full width regardless so that it does not cut off and feel unfinished.
    • It is hard to notice the dark green line that appears over a navigation item when it is selected. This line should either underline the text or the text should change to this color.
    • The text for the drop down menus on the Issues page is too large and overbearing for the screen space. It feels like the menu is screaming at the user as it appears larger than even the header and title of the page.
    • On the Issues page, featuring another search bar is redundant and may confuse the user.
    • Showing the Facebook page feed in the footer of every page isn’t good placement. The feed should be placed in the right column and the footer could feature social media icons that will link to those sites when clicked.
Team 2
    • I like how when you scroll down the page the navigation turns into a sticky header that stays at the top of the page.
    • I like how the navigation links highlight when hovered over and stay highlighted when clicked on letting the user know which page they are currently on.
    • I like the idea of staff picking this week’s best work to feature first on the landing page.
    • I like the drop-down menu for Issues that lets you browse by genre versus having a long list of the year each article was issued.
    • I like how the submissions page is short and concise with the ability to submit work right from the website.
    • I like the layout and simplicity of the About page and the Contact section below it.
Needs Improvement
    • There are too many different type faces being used throughout this site including serif and sans serif fonts. I suggest a maximum of two fonts of the same type be used, so either serif or sans serif (not both) and one for titles/headers and one for body text.
    • There is too much negative white space used throughout the site. To solve this, a column could be added like on Team 1’s site or articles could be featured in columns to help fill up the space.
    • I don’t like that when you scroll down a page the logo and branding of the GSR is lost. I would add the GSR logo in the top left of the navigation bar so users are reminded what site they are on and can click on it to go back to the Home page.
    • I think social media links, contact information, and/or a subscription option needs to be added to the footer of the site so users can easily get in touch with the GSR if needed.
    • When you click to read an article, the side bar repeats itself by featuring a Search bar, “Recent Posts”, “Recent Comments,” and “Categories” section twice.
Team 3
    • I like how the navigation links highlight when hovered over. It would be even better if it stayed highlighted when clicked on letting the user know which page they are currently on.
    • I like giving the users the option to subscribe to GSR at the bottom of the Home page, but this is something that could remain on all pages as users explore the site.
    • I like the live Facebook feed is shown in the right column. This allows users to see GSR has an active Facebook page and they can stay up to date on what GSR is doing right from the site.
    • I like how a button giving the user the option to share content to their personal Facebook or Twitter account is placed on every page. This is a great way to make the site interactive while helping promote GSR to a new audience.
    • I really like how the About page is laid out. While there are minor typos currently in the bio about GSR, I like how each staff member has their own picture that shows their personality and is paired with their role in editing the magazine.
Needs Improvement
    • The site needs a clear color scheme and branding for GSR. There is a lot of white and grey as well as other colors that do not correspond with Stevenson’s color scheme such as blue and red.
    • This site is very image heavy and the images are linked to the site’s navigation. While I like this idea for choosing what article you want to see, the images must be optimized for the web so they do not have a long loading time. Images not loading fast enough will frustrate the user and deter them from using the site.
    • The header image that appears on every page is not clear and may not be the best image to represent GSR.
    • I think the navigation links in the side bar are repetitive and may confuse the user. The side bar offers more navigation options than what is featured in the top navigation. Keeping the navigation bar at the top and turning it into a sticky header so it stays while scrolling would be more effective.
    • I understand the original idea behind the layout of the Submissions/Guidelines page. However, I think it may be best to have the guidelines appear before the submission forum to ensure that users whether new or returning submit the correct materials each time.
Best Redesign

I think Team 2 has the best redesign out of the three options. Most of the things that need improvement are simple design and layout changes. The overall structure of the site is good to work with moving forward. The redesign captures the main goals of GSR’s redesign in terms of being clean, simple, modern, and easy to navigate.

UX/UI Article Summary

Li, Jacky. “3 Practical Tips for Product Builders When Designing in an Era of Digital Exhaustion.” Medium, 11 Jan. 2020. Retrieved from https://uxdesign.cc/3-practical-tips-for-product-builders-when-designing-in-an-era-of-digital-exhaustion-47131d933baa.

 

The article provides insights into the new wave of digital exhaustion users are experiencing and ways designers can overcome this. Li discusses how smartphones and mobile applications consume a large amount of people’s lives. The term digital wellbeing is brought up indicating that designers need to be aware of their audience’s cognitive capacity. Li also suggested using maintain/shift/inspire framework. Rather than creating new digital spaces, a focus can be placed on maintaining current behavior by shifting the structure of the space and inspiring user’s to sustain this altered behavior. The third tip Li introduces is being aware of the concept of the emotional piggy bank. The piggybank represents the empathetic relationship built between the designer and the user.

The article suggests solutions to digital exhaustion can extend past creating new technology and focus on improving the one’s that currently exist. This tip can be applied to our redesign of the Greenspring Review. For a redesign you must take what currently exists and rework it to better suit today’s target audience. This also follows the maintain/shift/inspire framework. In order to do a successful redesign, we must also take other concepts from the article into consideration. Knowing your audience is crucial to the redesign process. Following Li’s advice, we must identify their needs and ensure our design effectively meets them without surpassing their cognitive capacity. Li helped teach me that for a successful user experience and to be able to break through the clutter of this digital age designers need to speak with their target audience. Designs and products must be user centered.