• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

product development

Jan 31 2023

Photography For UX Designers: The Top 4 Tips To Make The Most Of Online Imagery

Overview

Photography is a crucial part of designing a layout or banner. When thinking about an image to place with text, whether it be overlaying on the image or underneath, above, or to the sides of an image, a designer needs to consider two key factors:

  • Does the image make sense?
  • Does the image have a conversation with the layout?

Elements such as the dynamic imagery of people interacting, strong lines, action, or diversity are all ways that design and imagery can speak to each other.

No alt text provided for this image

Using these elements helps create a story for the viewer to interact with and incite a more personal experience on a larger scale. To have a viewer relate to content is achieving the ultimate goal: Fostering an emotional experience is gold-medal status.

1. Ensure The Image Speaks To The Content

When developing the design of a page with photography in mind, the closer the image relates to the content, the more likely the viewer’s eye moves around the page in a pleasing manner.

Strategically placing images on either side of the screen will help the viewer have resting time between content, which creates a “visual storyline” for the page. The images also help the user stay engaged with the page.

No alt text provided for this image

2. Photograph Composition Builds Directional Sight Lines

Make sure that the main element of the image—such as the people or subject matter— is placed to the right or left. (The exception being the positioning of the direction of the content in an advertisement or banner) If it’s in a layout, making sure to have the image point in the direction of the content that viewer’s need to be directed to focus on first, is crucial.

No alt text provided for this image

3. Appropriate Image Content Enhances The Story

Make sure the subjects in the image are both dynamic as well as inclusive. All subjects should tell a story to help the user understand what the content will say, like the synopsis of a paragraph.

No alt text provided for this image

4. Complimentary Color Theory Provides Both An Aesthetic And User-Friendly Experience

Studies have shown that a dark background with the text knocked out makes for a more eye-grabbing advertisement.

For example, if the image is being used for an advertisement, it’s easier for users to read smaller text if it’s dark text on a light background.

It’s imperative to make sure the section where the text sits is not too busy. The user needs (and wants) to authentically experience content without strenuous distraction.

No alt text provided for this image

Closing Thoughts

Keeping all these elements in mind while looking for imagery to “illustrate” a layout or advertisement will help any user have a better user experience.

Written by Kaela Coppinger · Categorized: Design UX/UI, Product Development · Tagged: design, Designers, INRHYTHMU, learning and growth, product design, product development, ux, uxui

Jan 04 2023

Creating An Effective Proxy Using Node And Express

Overview

Engineers are often faced with the challenge of pulling together multi-website/application projects, without full cross-platform permissions. Utilizing both a Node and an Express proxy, can pull together two websites/applications in a formal and cohesive format.

The aforementioned situation comes up more often than one would think, whether it be a question of host permissions or compatibility, it can undoubtedly pull up a number of possible roadblocks. There are several reasons a developer might not be able to run a site or app in their local environment; perhaps it’s complex to set up or involves a number of permissions. Regardless of the reason, Node and Express can present a novel way to solve the problem.

No alt text provided for this image

In Matt Billard’s Lightning Talk session, we will be uncovering the the primary strategies for Creating An Effective Proxy Using Node And Express:

  • Overview
  • The Architecture
  • How It Works
  • “Gotchas” To Avoid
  • Live Demonstrations
  • Closing Thoughts

The Architecture

No alt text provided for this image

The browser makes a request to the Node Express proxy server where the following three scenarios crop up:

  1. If the user requested an HTML page, we need to combine the page from website 1 and 2. The proxy first asks website 1 and then website 2 for its HTML. It then modifies the two HTML files, combines them, and returns the result to the browser. (Details on how this works below.)
  2. The HTML page will then request the CSS, JavaScript, and other assets it requires. These requests will again go through the proxy which will pass on the requests. If website 1 has the asset, great, the proxy will return it to the browser. 
  3. If website 1 does not have the asset, the proxy will then ask website 2 and return it to the browser.

In the example below, when using the InRhythm.com website as the target into which an engineer can inject some local code (in this case a basic Create React App project); the final result is an actual screenshot of the 2 websites living together in the same browser window.

No alt text provided for this image

How It Works

As mentioned above, website 1 and 2’s HTML are combined. This involves a few steps. Webpages can’t have 2 doctype, html, head, or body tags, so the use of some regex to strip those, will be required. Now that website 2’s HTML is ready, a coder can inject it before website 1’s closing </body> tag. 

No alt text provided for this image

The above code shows the modifications to website 1’s HTML.

It shows a few things:

  1. Many websites have full ‘absolute URLs’ for their links. They look like this: https://www.inrhythm.com/who-we-are/. The problem is if the user clicks on this, they’ll be taken away from our proxy and go to the target website. One can solve this by removing all www.something.com pieces while retaining the language the after the slash.
  2. Injecting the CSS as discussed above, removes backgrounds and allows clicks to pass through website 2 to website 1. (Keep in mind this will probably be slightly different depending on the two sites a coder is combining.)
  3. Injecting the HTML from website 2 must be modified before closing the </body> tag.
No alt text provided for this image

“Gotchas” To Avoid

It can take a variety of trial and errors in order to develop a proxy to one’s exact specifications. Some of the most common occurrences, a coder may find themselves troubleshooting are:

  • Websites usually compress or “Gzip” their content. Normally this is a great thing. It means less data is transferred and websites load more quickly. However, when in need of a proxy, it can become quite troublesome for ease of use. An engineer can’t parse, manipulate, and modify HTML if it looks like gibberish. The solution is actually quite simple: as it turns out, there’s a header one can send with their request to ask the server not to Gzip anything.
No alt text provided for this image
  • When using a proxy, all requests are going to have the header “host” set to “localhost.” Now this is probably not a problem for most sites, but to the target server, this doesn’t look like a very normal request, and indeed, one will find some websites responded abnormally and will return pages that looked nothing like expected. The solution cab be found in modifying one of the headers of the request. 
No alt text provided for this image
  • Due to needing to modify requests quite a bit, this may result in some possible browser abnormalities. The solution to this problem is to delete the ‘content-length’ header before the proxy sends the browser any final response. This will stop the browser from truncating the response and removing all the hard work needed to customize one’s proxy. 
No alt text provided for this image
  • When combining sites that use https, the proxy might complain that the SSL certificates don’t match what it’s expecting. Turns out it’s rather easy to relax this with the following code: 
No alt text provided for this image

Live Demonstrations

Matt Billard has crafted an intuitive demonstration to help guide you through these principles in practicum: 

No alt text provided for this image

Be sure to follow Billard’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

The Node.js framework Express allows an engineer to create web servers and APIs with minimal setup. Using Express in a Node.js application to create an API Proxy to request data from another API and return it to a consumer, is a vital skill to add to one’s skills toolkit. Using Express middleware to help optimize the API Proxy, will allow a coder to raise the bar and improve performance for returning data from the underlying API.

To develop and learn from Billard’s signature “Code Collider” proxy, feel free to download the direct code from GitHub.

Happy coding!

To learn more about Creating An Effective Proxy Using Node And Express, along with some live test samples, and to experience Matt Billard’s full Lightning Talk session, watch here.

Written by Kaela Coppinger · Categorized: Cloud Engineering, InRhythmU, Product Development, Software Engineering · Tagged: Code Collider, Code lounge, express, INRHYTHMU, learning and growth, Node, Node.js, product development, proxy

Dec 20 2022

Top 5 Best Practices For Building Forms

Various forms like sign-ups, logins, or checkout pages are seen everywhere in applications and websites, but what attracts a user to fill one out? What exactly makes one click the sign-up or call-to-action button on the page? Forms exist to be filled out, but there are a surprising number of forms which—through poor design, excessive fields, or other factors—push users to abandon them, unfilled. Make your forms simple and easy to navigate, and watch the data come flowing in.

Here are a few best practices when putting together your own forms to keep engagement high:

1. Ask For Less Information (and have an easy login!)

If you have a page with a sign-up flow for a new mobile app, what do you want to know from your user? It depends on what the product is and why you need the information from them. As an example: a date or friend matching platform would want your age, gender, and zip code on one screen. The next page could be preferences about the person you are hoping to match with. All of this information is necessary for the app’s purpose, but connecting to Facebook or Google has also made it much easier to skip certain steps in this process, allowing for less info needing to be manually filled out.

The following demonstration shows just how easy it is for the user to access all of the fields needed—i.e. name, picture, friends—from the Facebook API instead of filling out the same information manually.

No alt text provided for this image

2. Single-Column Ease vs. Multi-Column Stress

When you’re making a form, make sure it’s displayed in a single-column instead of a multi-column. This design element will make it easier for users to scan through and complete instead of trying to tab through different fields and with the potential of resulting frustration.

The following demonstration illustrates, the relative ease for a user to scan through one column, answering questions in a linear format instead of doing a Z-pattern back and forth.

No alt text provided for this image

3. Automate, Automate, Automate

One of the best form practices for improving design is automation. Automation makes it easier for the user to go through fields, without worrying about switching from lower and upper cases. The only fields that should not be capitalized are emails and passwords, since those cause delivery issues.

4. Progress Tracker

A user who is filling out a form—unless it’s a simple sign-up—wants to know how long the process will take them, and maybe even if it should be filled out now or saved for later. For mobile and desktop alike, a progress tracker should be included, like the examples shown below.

No alt text provided for this image

If the user is on a certain step it’s important to note that as well, all within an easily understood display of what they’ve already completed.

5. Testing (even when you don’t want to)

This is the step that many don’t even think of taking, since the design could be flawed and more time could be wasted in redesigning. The form you just created should be tested on a few different devices (at the very least on mobile and desktop) to see if it actually works and makes sense. What’s the point of developing a product that doesn’t work for the user?

The ultimate goal is getting the user to click on the “continue” or “submit” buttons in the end. By following these best practices, you can remove common roadblocks in form submissions and make the experience better for your users. 

Written by Kaela Coppinger · Categorized: Design UX/UI, Learning and Development, Product Development · Tagged: best practices, design, design patterns, Designers, INRHYTHMU, learning and growth, product development, UI, ux, uxui

Aug 16 2022

The Reactive Streams Difference

Overview

As the world continues to shift towards online-first data, for everything from their remote workplace to streaming their favorite shows on Netflix, it’s become more imperative to recognize that “live” data needs to be handled with extra special care in an asynchronous system. 

Asynchrony is needed in order to enable the parallel use of computing resources, on collaborating network hosts with a single streamline data engine. 

The primary goal of Reactive Streams is to govern the exchange of stream data across an asynchronous boundary – similar to passing elements on to another thread or thread-pool in traditional transfer – while ensuring that the receiving side isn’t forced to buffer arbitrary data. 

Meaning… Reactive Streams allow for MULTIFOLD data processing, as opposed to traditional models, leaving more room for faster response times and a smoother UX experience.

In Hirav Oza’s Lightning Talk session, we will breaking down the following topics:

  • Functional Style Programming
  • Reactive Streams And Back Pressure
  • Popular Reactive Libraries
  • Closing Thoughts

Functional Style Programming

Functional Programming languages are specially designed to handle symbolic computation and list processing applications. It is a declarative type of programming style with a main focus on “what to solve” in contrast to “how to solve” (an imperative style). 

Reactive Programming by nature embraces a functional programming style. It functions similarly to common programmer staples such as Steams API and Lambdas, making it a smooth integration curve. 

Reactive Streams And Backpressure

Backpressure happens when data can’t render as fast as it needs to. This can cause a “buildup” of data at the I/O Switch when buffers are full and cannot receive additional data. At this point, no additional data packets can be transferred until the bottleneck of data has been eliminated or the buffer has been emptied.

Reactive Streams disrupt buildup by supporting the back-pressure so they can signal the database to “hold off” on producing more output, or in other words– “buffer” until the remaining data is processed… Making for a smoother UX  experience for the interface user and a more cohesive data transfer for the programming system. 

Popular Reactive Libraries 

  1. RxJava

RxJava is a specific implementation of reactive programming for Java and Android that is influenced by functional programming. It favors function composition, avoidance of global state and side effects, and thinking in streams to compose asynchronous and event-based programs.

  1. Project Reactor

Reactor Core is a Java 8 library that implements the reactive programming model. It’s built on top of the Reactive Streams specification, a standard for building reactive applications. 

  1. Flow API

Flow API is the official support for reactive streams specification since Java 9. It is a combination of both Iterator and Observer patterns. 

Flow API consists of four basic interfaces:

  • Subscriber: The Subscriber subscribes to Publisher for callbacks.
  • Publisher: The Publisher publishes the stream of data items to the registered subscribers.
  • Subscription: The link between publisher and subscriber.
  • Processor: The processor sits between Publisher and Subscriber, and transforms one stream to another.

Test Your Skills 

You’ve unpacked quite a few introductory principles – think you’re up to exploring a live demonstration of these concepts in play? 

Hirav Oza has crafted an intuitive demonstration to help guide you through these principles in practicum: 

Be sure to follow Oza’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

All programs should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to exploring the basic components needed to test how Reactive Streams can improve your personal data application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Reactive Streams in web development and to experience Hirav Oza’s full Lightning Talk session, watch here. 

Written by Kaela Coppinger · Categorized: DevOps, InRhythmU, Learning and Development, Product Development, Software Engineering · Tagged: best practices, devops, INRHYTHMU, learning and growth, product development, Reactive Streams, ux

Feb 04 2020

Letting Go of the Formality

It wasn’t that long ago that suits, ties, knee-length skirts, heels and pantyhose were required wardrobe staples. In fact, many enterprise Fortune 100s upheld a formal dress code as part of their HR Policy Handbooks. Goldman Sachs, the last bastion of formality on Wall Street, finally relaxed its dress code and offered a “flexible style” option. They only did so last year. Their updated policy permitted men to choose garments other than suits. Admittedly, this made things more complicated for women but that’s a topic for another blog.

Since we’re agile practitioners here at InRhythm, it made sense to look at our own approaches to talent and acquisition. Not to mention retention. Practices and policies drive corporate culture. Here, Agile Platinum Principle One: resist formality, must serve as one of the pillars of our talent strategy.

If your company doesn’t offer a culture that’s aligned with the needs and expectations of today’s job seekers, then, as Hiring Manager or Chief People Officer, you’re going to have a really hard time. At best, you’re going to struggle and slog through your days and recruiting campaigns. At worst, you’re not going to have any people to serve as Chief over!

The link between informality and tech

Ask anyone within the technology field, or external to it, to describe or draw a person in tech, be it a software developer or a startup founder. The universal response is a male, typically Caucasian, dressed in sloppy jeans and a hoodie. Where did this level of informality originate?

Many would cite Lou Gerstner’s (former CEO of IBM) decision to roll out “casual dress.” Even the New York Times balked with a headline that read, “Black Jeans Invade Big Blue.” Shortly thereafter, Hewlett Packard (HP) introduced “Blue Sky Days” which permitted employees to wear jeans to work on Fridays. From there, dress code devolved or evolved – it depends on your perspective – into what we see today.

However, the Platinum Principal of resisting formality is not restricted to dress code. It extends into everything that we do. Formality also has implications with unconscious bias, how we greet and interact with people, the forms that we require candidates to complete and so on. Tone and style go hand in hand.

How are we resisting formality?

We are constantly taking steps to increase our awareness and connection with our prospective employees, candidates, contractors, staff and employees. Efforts are made to understand what they need so that we can craft our talent, acquisition and retention strategies around their needs and expectations versus requiring that they conform to ours. Here, we have embraced an agile culture across the company, not just in our product development efforts.

As agile craftsmen, with respect to HR recruiting and retention strategies, we have adopted an approach that is more responsive than it is prescriptive. Our applications are deliberately designed with brevity in mind to expedite the hiring process. We measure how long it takes from the time that an application is submitted to an open job posting until someone is seated in the role. A conscientious effort, with monitoring, is made to ensure that we are constantly moving our candidates through the hiring process as swiftly as they seek to do so.

Another way that may come as a bit of a surprise is the effort we make to create a relaxed culture that allows for flexibility and downtime. We understand the enormous pressure and stress that our employees feel as they do all that they can to deliver on our clients’ needs. It’s okay to push through a couple of scrums or back-to-back sprints but it’s not sustainable. Over the holidays, we relaxed with an in-house office party and gave people some bonus time. This week is Valentine’s Day: celebrate it or not, you don’t need to make it about sending flowers and chocolates to your partner. Use it as a reminder to resist formality, take some time and reach out to whomever it is that you care about, be it a parent or sibling or a friend.

Resist formality! Make strides to emulate the people and culture around you. Forcing people into a process defined by its rigor and inflexibility is the antithesis of what a company should do. Particularly a company who’s purpose is to bring agile methodologies and success to our clients.

Stu Weiser,

Director of Talent Acquisition
Image created by katemangostar – www.freepik.com

Written by Stu Weiser · Categorized: Agile & Lean, Cloud Engineering, Culture, Employee Engagement, Learning and Development, Talent, Web Engineering, Women in Tech · Tagged: agile, challenges, coaching, engineering, inrhythm, insights, living lab, product development, software, tech, tips

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Footer

Interested in learning more?
Connect with Us
InRhythm

110 William St
Suite 2601
New York, NY 10038

1 800 683 7813
get@inrhythm.com

Copyright © 2023 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT